有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>27_事件类型之鼠标事件</title>
    <style>
        ul,
        html,
        body,
        li,
        p,
        button {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        ul {
            width: 1000px;
            margin: 150px auto;
            overflow: hidden;
        }
        
        ul>li {
            height: 60px;
            width: 1000px;
            list-style: none;
            margin: 10px;
            line-height: 60px;
        }
        
        button {
            margin-top: 20px;
            margin-right: 20px;
        }
        
        button {
            float: left;
        }
        
        p {
            float: left;
        }
        
        .parent {
            position: relative;
            box-sizing: border-box;
            height: 600px;
            width: 200px;
            padding: 25px;
            margin: 150px auto 0;
            background-color: #ff6700;
            color: #fff;
        }
        
        .son {
            position: relative;
            height: 150px;
            width: 150px;
            background-color: pink;
            margin-bottom: 20px;
        }
        
        .son p,
        .parent>p {
            display: none;
            position: absolute;
            left: 50%;
            background-color: #000;
            height: 30px;
            width: 30px;
            z-index: 2;
        }
        
        .son p {
            top: 50%;
            transform: translate(-50%, -50%);
        }
        
        .parent>p {
            top: -25%;
            transform: translateX(-50%);
        }
    </style>

</head>

<body>
    <h1>鼠标事件</h1>
    <div class="box">
        <ul>
            <li><button id="btn1">click事件</button>
                <p id="p1"></p>
            </li>
            <li><button id="btn2">dbclick事件</button>
                <p id="p2"></p>
            </li>
            <li><button id="btn3">mousedown事件</button>
                <p id="p3"></p>
            </li>
            <li><button id="btn4">mouseup事件</button>
                <p id="p4"></p>
            </li>
            <li><button id="btn5">mousemove事件</button>
                <p id="p5"></p>
            </li>
            <li><button id="btn6">mouseenter事件</button>
                <p id="p6"></p>
            </li>
            <li><button id="7">mouseleave事件</button>
                <p id="p7"></p>
            </li>
            <li><button id="btn8">mouseover事件</button>
                <p id="p8"></p>
            </li>
            <li><button id="btn9">mouseout事件</button>
                <p id="p9"></p>
            </li>
            <li><button id="btn10">wheel事件</button>
                <p id="p10"></p>
            </li>

        </ul>
    </div>
    <div class="parent">
        <p id="parentP"></p>
        <div class="son">
            <p id="p11"></p>
        </div>
        <div class="son">
            <p id="p12"></p>
        </div>
        <div class="son">
            <p id="p13"></p>
        </div>
    </div>
    <script>
        var btns = document.getElementsByTagName('button');
        var ps = document.getElementsByTagName("p");
        btns[0].addEventListener('click', clickEvent);

        function clickEvent() {
            ps[0].innerHTML = '点击触发click事件';
        }
        btns[1].addEventListener('dblclick', dblclickEvent);

        function dblclickEvent() {
            ps[1].innerHTML = '双击触发dbclick事件';
        }
        btns[2].addEventListener('mousedown', mousedownEvent);

        function mousedownEvent() {
            ps[2].innerHTML = '鼠标按键按下触发mousedown事件';
        }
        btns[3].addEventListener('mouseup', mouseupEvent);

        function mouseupEvent() {
            ps[3].innerHTML = '鼠标按键抬起触发mouseup事件';
        }
        btns[4].addEventListener('mousemove', mousemoveEvent);

        function mousemoveEvent() {
            ps[4].innerHTML = '鼠标持续移动抬起触发mousemove事件';
        }
        btns[5].addEventListener('mouseenter', mouseenterEvent);

        function mouseenterEvent() {
            ps[5].innerHTML = '鼠标进入触发mouseenter事件，无冒泡现象';
        }
        btns[6].addEventListener('mouseleave', mouseleaveEvent);

        function mouseleaveEvent() {
            ps[6].innerHTML = '鼠标离开触发mouseleave事件，无冒泡现象';
        }
        btns[7].addEventListener('mouseover', mouseoverEvent);

        function mouseoverEvent() {
            ps[7].innerHTML = '进入节点触发mouseover事件，有冒泡现象';
        }
        btns[8].addEventListener('mouseout', mouseoutEvent);

        function mouseoutEvent() {
            ps[8].innerHTML = '离开节点触发mouseout事件，有冒泡现象';
        }
        btns[9].addEventListener('wheel', wheelEvent);

        function wheelEvent() {
            ps[9].innerHTML = '滚动鼠标滚轮触发wheel事件';
        }
        var parent = document.querySelector(".parent");
        var son = document.querySelectorAll(".son");
        var parentP = document.getElementById("parentP");
        console.log(ps[11]);
        console.log(parent);
        console.log(parentP);
        var str = ['mouseenter', 'mouseleave', 'mouseover', 'mouseout']
        parent.addEventListener(str[0], function() {
            parentP.style.display = 'block';
        })
        parent.addEventListener(str[1], function() {
            parentP.style.display = 'none';
        })
        for (var i = 0; i < son.length; i++) {
            son[i].addEventListener(str[0], function() {

                ps[(11 + i)].setAttribute('style', 'dispaly:block;');
            })
            son[i].addEventListener(str[1], function() {
                ps[(11 + i)].setAttribute('style', 'dispaly: none;');

            })
        }
        /*  son[0].addEventListener(str[0], function() {

             ps[11].style.display = 'block';
         })
         son[0].addEventListener(str[1], function() {
             ps[11].style.display = 'none';
         })
         console.log(son[0]);
         son[1].addEventListener(str[0], function() {

             ps[12].style.display = 'block';
         })
         son[1].addEventListener(str[1], function() {
             ps[12].style.display = 'none';
         })
         son[2].addEventListener(str[0], function() {

             ps[13].style.display = 'block';
         })
         son[2].addEventListener(str[1], function() {
             ps[13].style.display = 'none';
         }) */
    </script>

</body>

</html>
<！--    我的问题是，最后这部分注释的内容，我想做循环解决，但是
    ps[(11+i)].style.display = 'block';这句总是报错，cant read the property of undefined 
  可是我在循环体里，console.log(ps[(11+i)]); 或者直接写 console.log(ps[(11+i)].style.display='block'),都可以在控制台打印出来
我想知道怎么回事
-->

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 9728楼

老师为什么create store 不能使用会报错

后来我根据建议安装了 Redux Toolkit

但是还是不会使用 Redux Toolkit

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.

For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today

configureStore from Redux Toolkit is an improved version of createStore that simplifies setup and helps avoid common bugs.

You should not be using the redux core package by itself today, except for learning purposes. The createStore method from the core redux package will not be removed, but we encourage all users to migrate to using Redux Toolkit for all Redux code.

If you want to use createStore without this visual deprecation warning, use the legacy_createStore import instead:

import { legacy_createStore as createStore} from 'redux'

@不推荐使用

我们推荐使用 @reduxjs/toolkit 包的 configureStore 方法，它取代了 createStore。

Redux Toolkit 是我们推荐的当今编写 Redux 逻辑的方法，包括存储设置、reducers、数据获取等。

有关更多详细信息，请阅读此 Redux 文档页面：https://redux.js.org/introduction/why-rtk-is-redux-today

Redux Toolkit 中的 configureStore 是 createStore 的改进版本，它简化了设置并有助于避免常见错误。

你今天不应该单独使用 redux 核心包，除非是为了学习目的。核心 redux 包中的 createStore 方法不会被删除，但我们鼓励所有用户迁移到对所有 Redux 代码使用 Redux Toolkit。

如果您想在没有此视觉弃用警告的情况下使用 createStore，请改用 legacy_createStore 导入：

从“redux”导入 { legacy_createStore as createStore}

“createStore”已弃用。ts(6385)

index.d.ts(375, 4)：该声明曾在此处标注为已弃用。

WEB前端全系列/第十六阶段：React企业级项目/企业级后台管理系统 9729楼

找不到data

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/网络请求 9730楼

这个视频啥时候能放进来啊，老师。这部分内容前后有关联，缺少这部分内容的话这一大章节的学习就得先跳过了，跳着学习的话效果就不好了--

Python 全系列/第十三阶段：高并发性能怪兽-Tornado 框架/Tornado项目 9731楼

我这样写不会i=5啊

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 9732楼

增加的数据是中文的报错怎么办？

Python 全系列/第八阶段：轻量级Web开发利器-Flask框架/Flask数据库 9733楼

springmvcDemo.zip

老师，你看看springmvc_demo2下面的upload4.jsp，我点击上传头像以后，图片被加载到目录中了，但是页面的图片并没有显示，好像是img的src属性没有被修改到，这是啥原因喃

JAVA 全系列/第六阶段：项目管理与SSM框架/SpringMVC旧 9734楼

这个假排序有点晕我在这留个记号等以后再回来看看

JAVA 全系列/第二阶段：JAVA 基础深化和提高/容器 9735楼

同学您好