DOM高级

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

1.1注册事件概述

注册事件有两种方式：传统注册事件方法监听注册事件

（1）传统注册事件

利用on开头的时间 onclick
<button onclick = “alert(“hi)”>按钮
but.onclick = function() {}
特点：注册事件的唯一性
同一个元素同一个注册事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

（2）方法监听注册方式

w3c 标准（推荐方式）
addEventListener()是一个新的方法
IE9之前IE不支持此方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个处理函数
按注册顺序依次执行

1.2addEventListener 事件监听方式

eventTarget.addEventListener(type, listener, unescape)

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

该方法的三个参数：

type：事件类型字符串例：click，mouseover，注意不要带on
listener：事件处理函数，事件发生时，调用该监听函数
useCapture：布尔值，ture：捕获阶段； flase或省略：冒泡阶段

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

2.1删除时间的方式

（1）传统方式

eventTarget.onclick = null;

（2）方法监听注册方式

eventTarget.removeEventListener(type, listener, unescape);

<body>
    <div>11</div>
    <div>22</div>
    <script>
        var div = document.querySelectorAll('div');
        //1
        div[0].onclick = function() {
                alert(123);
                //传统方式删除事件
                div[0].onclick = null;
            }
            //2
        div[1].addEventListener('click', fn);   //调用fn函数不需要加括号
        function fn() {
            alert(33);
            //方法监听注册方式
            div[1].removeEventListener('click', fn);
        }
    </script>

3.DOM事件流

1.事件流描述的时从页面中接收时间的顺序

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

DOM事件流分为3个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

例如我们给div注册了点击事件：

捕获阶段：Document–>Elenent html–>Element body–>Element div

冒泡阶段：Element div–>Element body–>Elenent html–>Document

注意：

js代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attchEvent只能得到冒泡阶段
addEventListener(type, listener, unescape)第三个参数如果是true，表示在事件捕获阶段调用事件处理函数；如果false（不写默认flase），表示在事件冒泡阶段调用事件处理程序
实际开发中很少使用事件捕获，我们更加关注事件冒泡
有些事件没有冒泡，onblur，onfocus，onmouseenter，onmouseleave

<style>
    .father {
        margin: 100px 500px;
        position: relative;
        width: 200px;
        height: 200px;
        background-color: blue;
    }
    
    .son {
        position: absolute;
        top: 25px;
        right: 25px;
        width: 150px;
        height: 150px;
        background-color: pink;
    }
</style>

<body>
    <div class="father">
        <div class="son">2</div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        //捕获阶段 addEventListener(type, listener, unescape)第三个参数是true  
        //Document-->Elenent html-->Element body-->father-->son
        document.addEventListener('click', function() {
            alert('document');
        }, true);
        father.addEventListener('click', fn, true);
        function fn() {
            alert('father');
        }
        son.addEventListener('click', fn1, true);
        function fn1() {
            alert('son');
        }

        //冒泡阶段 addEventListener(type, listener, unescape)第三个参数时false或者省略
        //son-->father-->Element body-->Elenent html-->Document
        // document.addEventListener('click', function() {
        //     alert('document');
        // }, false);
        // father.addEventListener('click', fn, false);
        // function fn() {
        //     alert('father');
        // }

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

4.事件对象

4.1什么是事件对象

1
2
3

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click', function(event) {})
//这个event就是事件对象，我们还喜欢写成 e 或者 evt

官方解释：event对象代表事件的状态，比如鼠标的位置，鼠标按钮的状态

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，他有很多属性和方法

4.2事件对象的使用语法

1
2
3

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click', function(event) {})
//这个event就是事件对象，我们还喜欢写成 e 或者 evt

这个event是一个形参，系统帮我们设定为事件对象，不需要传参进去
当我们注册事件时，evevt对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        // div.onclick = function(e) {
        //         e = e || window.event //window.event兼容兼容IE678
        //         console.log(e);
        //     }
        //不考虑兼容的写法
        div.addEventListener('click', fn);
        function fn(e) {
            console.log(e);
        }
    </script>
</body>

4.3事件对象的常见属性和方法

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

1.e.target和this的区别

e.target返回的是触发事件的对象（元素）
this返回的是绑定事件的对象（元素）
区别：e.target点击了哪个元素，就返回那个元素；this哪个元素绑定了点击事件，就返回这个绑定的元素

<body>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            //给ul绑定了事件，无论点击哪个元素this就指向ul
            console.log(this);
            //e.target指向点击的那个对象，点击li就指向li
            console.log(e.target);
        })
    </script>
</body>

2.阻止默认行为

1	e.preventDefault

阻止默认行为（事件）让链接不跳转或者让按钮不提交

<body>
    <a href="www.baidu.com">百度</a>
    <script>
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault(); //dom标准写法
        })
    </script>
</body>

3.阻止事件冒泡

1	e.stopPropagation()

标准写法：利用事件对象里面的e.stopPropagation()方法
非标准写法：IE678利用事件对象cancelBubble

document.addEventListener('click', function() {
             alert('document');
         }, false);
         father.addEventListener('click', fn, false);
         function fn() {
             alert('father');
             e.stopPropagation();	//阻止事件冒泡
             e.cancelBubble = true;	//非标准
         }

         son.addEventListener('click', fn1, false);
         function fn1() {
             alert('son');
         }

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

 **事件委托**：也成为事件代理，在jQuery里面称为事件委派

原理：不是每个子节点都单独设置事件监听器，而是事件监听器设置在其父元素节点上，然后利用冒泡原理影响设置每个子结点

例如：给ul注册点击事件，然后利用事件对象target来找到当前点击的li，因为点击到li，事件冒泡到 ul上，ul有注册事件，就会触发事件监听器

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert(333); //点击li会冒泡到ul，然后触发事件监听器
            console.log(e.target); //可以得到点击的对象
        })
    </script>
</body>

6.常用的鼠标事件

6.1禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //禁止鼠标右键菜单
        ul.addEventListener('contextmenu', function(e) {
            e.preventDefault();	//阻止默认行为
            console.log(e.target); //可以得到点击的对象
        })

    </script
</body>

6.2禁止鼠标选中

selectstart 开始选中

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
		//禁止选中文字
        ul.addEventListener('selectstart', function(e) {
            e.preventDefault();
            console.log(e.target); //可以得到点击的对象
        })
    </script>

</body>

6.3鼠标事件对象

event对象代表时间的状态，跟事件相关的一系列信息的集合

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

6.4键盘事件

键盘事件对象	说明
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发（不识别功能键 ctrl shift）

1.如果使用addElementListenter()不需要加on

2.三个事件的执行顺序是：keydown–>keypress–>keyup