事件高级（作为学习笔记）

学习目标

能写出元素注册事件的两种方式
能够说出删除事件的两种方式
能够说出 DOM 事件流的三个阶段
能够利用事件对象完成跟随鼠标案例
能够封装阻止冒泡的兼容性函数
能够说出事件委托的原理
能够说出常用的鼠标和键盘事件

1. 注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件 。
注册事件有两种方式：传统方式和方法监听注册方式。

传统注册方式	方法监听注册方式
利用 on 开头的事件 onclick	W3C 标准推荐方式
`<button onclick="alert('hi~')"></button>`	addEventListener()它是一个方法
btn.onclick = function(){}	IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点注册事件的唯一性	特点：同一个元素同一个事件可以注册多个监听器
同一个元素同一个事件只能设置一个注册函数，最后注册的处理函数将会覆盖前面注册的处理函数	按注册顺序依次执行

var e = e || window.event; //标准化事件对象

1.2 addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener() 方法值将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

type：事件类型字符串，比如click，mouseover，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false，学完DOM事件流后，我们在进一步学

栗子：

<body>
    <button>传统注册方式</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('How are you!');
        }
        btns[0].onclick = function() {
            alert('Welcome to China!');
        }

        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert('Welcome to China!');
        })
        btns[1].addEventListener('click', function() {
            alert('Welcome to xinjiang!');
        })
    </script>
</body>

1.3 attachEvent（IE9以后的都不支持了）

eventTarget.attachEvent(“onclidk”, function(){})

IE都嫌弃，了解一下就行，想要看的查百度吧。。。

2. 删除事件（解绑事件）

https://blog.csdn.net/weixin_45773503/article/details/106005237

3. DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流

注意：

JS 代码中只能执行捕获或者冒泡的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEvenListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示事件冒泡阶段调用事件处理程序
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如 onblur，onfocus，onmouseover，onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事情。

4. 事件对象

事件对象的常见属性和方法	说明
e.target	返回触发事件的类型标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如 click mouseover 不带 on
e.cancelBubble	该事件阻止冒泡 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转属性
e.preventDefault	该方法阻止默认事件（默认行为）标准比如不让链接跳转方法
e.stopPropagation	阻止冒泡

<body>
    <div>div</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者不让他提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault();
        })

        // 3. 传统的注册方式
        a.onclick = function(e) {
            alert('帅');
            // 普通浏览器 e.preventDefault(); 方法
            e.preventDefault();
            // 低版本浏览器  属性
            e.returnValue;
            // 我们可以利用return false 也能阻止默认行为
            return false;
        }
    </script>
</body>

5. 阻止事件冒泡

5.1阻止事件冒泡的两种方法

e.stopPropagation(); 停止冒泡

e.cancelBubble = ture; 非标准 ie6-8

<body>
    <div class="father" style="width: 100px; height: 100px; background-color: antiquewhite;">
        <div class="son" style="width: 50px; height: 50px; background-color:red">son</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            // e.stopPropagation(); //停止冒泡
            // e.cancelBubble = ture; // 非标准
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);

        document.addEventListener('click', function() {
            alert('document');
        });
    </script>
</body>

5.2 阻止事件冒泡的兼容性解决方案

        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancelBubble = ture;
        }

6. 事件委托（代理，委派）

6.1. 事件委托

事件委托也称为事件代理，在jQuery中称为事件委派。

6.2. 事件委托的原理

不是每个子节点单独设置事件监听器，而是在其父节点上设置事件监听器，然后利用冒泡来影响设置每个子节点

6.3 事件委托的作用

我们只操作了一次DOM，提高了程序的性能。

6.4 栗子

<body>
    <ul>
        <li>事件委托</li>
        <li>事件委托</li>
        <li>事件委托</li>
        <li>事件委托</li>
        <li>事件委托</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        var li = ul.children;
        console.log(li);

        ul.onclick = function(e) {
            // alert('I Love China!');
            for (var i = 0; i < ul.children.length; i++) {
                li[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = "pink";
        }
    </script>
</body>

7. 常用的鼠标事件

7.1常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onmousemove	鼠标移动触发
onmouseenter	鼠标经过触发
onmouseleave	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

<body>
    无法复制的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
            alert('请尊重劳动成果');
            e.preventDefault();
        })

        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

7.2 鼠标事件对象

event 对象代表事件的状态，跟事件相关的一系列信息的集合，现阶段主要是事件对象
MouseEvent 和键盘事件 KeyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区域的 X 座标
e.clientY	返回鼠标相对于浏览器窗口可视区域的 Y 座标
e.pageX	返回鼠标相对于文档页面的 X 座标 IE9+ 支持
e.pageY	返回鼠标相对于文档页面的 Y 座标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的 X 座标
e.screenY	返回鼠标相对于电脑屏幕的 Y 座标

<body>
    无法复制的文字
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function() {
            // 1. client 鼠标在可视区域的 x 和 y 的座标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log("------------------------");

            // 2. page 鼠标在页面文档中的 x 和 y 座标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log("------------------------");

            // 3. screen 鼠标在电脑屏幕的 x 和 y 座标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>
</body>

案例：

鼠标跟随天使

8. 常用的键盘事件

8.1 事件除了使用鼠标触发，还可以使用键盘触发

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发（先执行这个）
onkeypress	某个键盘按键被按下时触发但是不识别功能键比如 ctrl shift 箭头等

注意：

如果使用addEventListener 不需要加 on
onkeypress 和前面两个的区别是，他不识别功能键，比如左箭头，shift 等
三个事件的执行顺序是：keydown --> keypress --> keyup

<body>
    <script>
        // 1. 键盘按下时触发
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        // 2. 键盘弹起时触发
        document.addEventListener('keydown', function() {
            console.log('我按下了');
        })

        // 3. keypress 按键按下时触发
        document.addEventListener('keypress', function() {
            console.log('我按下了keypress');
        })
    </script>
</body>

8.2 键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的 ASCLL 值

注意：

onkeydown 和 onkeyup 不区分大小写，onkeypress 区分字母大小写。
在实际开发中，我们更多的使用 keydown 和 keyup，它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode区分大小写，返回不同的ASCLL码值

8.3 案例

模拟京东按键输入内容