这是我参与「第四届青训营」笔记创作活动的的第15天

DOM

事件高级

注册事件（绑定事件）

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

传统注册方式 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

利用on开头的事件onclick
<button onclick="alter('hi~')"></button>
btn.onclick=function(){}

方法监听注册方式同一个元素同一个事件可以注册多个监听器，按注册顺序执行

addEventListener()
IE9之前的IE不支持以上方法，可使用attachEvent()代替

1、addEventListener()

eventTarget.addEventListener(type,listener[,useCapture])方法将指定的监听器注册到eventTarget（目标对象）上，该方法接收三个参数：

type：事件类型字符串，比如click、mouseover，这里不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false

<button>传统注册事件</button>
    <button>事件监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 传统注册事件
        btns[0].onclick = function() {
            console.log("11");
        }
        btns[0].onclick = function() {
            console.log("22");
        }
        // 事件监听
        btns[1].addEventListener('click',function(){
            console.log("33");
        })
        btns[1].addEventListener('click',function(){
            console.log("44");
        })

    </script>

console.log("11")被console.log("22")覆盖了，console.log("33")和console.log("44")先后执行。

2、attachEvent()

ie9以前的版本才支持

 btns[2].addEventListener('onclick',function(){
            console.log("55");
        })

删除事件（解绑事件）

传统注册方式 eventTarget.onclick=null

方法监听注册方式 ①eventTarget.removeEventListener(type,listener[,useCapture]) ②eventTarget.detachEvent(eventNameWithOn,callback);

<div>1</div>
    <div>2</div>
    <div>2</div>

    <script>
        var divs=document.querySelectorAll('div');
        divs[0].onclick=function(){
            alert(11);
            // 传统
            divs[0].onclick=null;
        }
        
        // 监听
        divs[1].addEventListener('click',fn);
        function fn(){
            alert(22);
            divs[1].removeEventListener('click',fn);
        }

    </script>

DOM事件流

事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：捕获阶段、当前目标阶段、冒泡阶段。

注意

JS代码中只能执行捕获或者冒泡其中一个阶段
onclick和attackEvent（ie）只能得到冒泡阶段
addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认为false）,表示在事件冒泡阶段调用事件处理程序
有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

<div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son=document.querySelector('.son');
        // 捕获阶段 
        son.addEventListener('click',function(){
            alert('son');
        },true)
        var father=addEventListener('click',function(){
            alert('father');
        },true)

捕获阶段 document-> html-> body->father->son，先alert('father')再 alert('son')

     <script>
     //冒泡阶段
        var son=document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('son');
        })
        var father=addEventListener('click',function(){
            alert('father');
        })
    </script>

此时处于冒泡阶段son->father->body->html->document，先alert('son')再 alert('father')

事件对象

<div>123</div>
    <script>
       var div = document.querySelector('div');
        // 传统
        div.onclick = function(event){
            console.log(event);
        }
        // 监听
        div.addEventListener('click',function(event){
            console.log(event);
    </script>

event就是一个事件对象，写到监听函数里面当形参来看。事件对象可自己命名。
事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数。
事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标等；如果是键盘事件就包含了键盘事件的信息，比如判断用户按下了哪个键。
事件对象也有兼容性问题，ie678通过windows.event兼容性写法 e=e|windows.event

事件对象常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象（标准）
e.srcElement	返回触发事件的对象（非标准）
e.type	返回事件的类型比如click
e.cancelBubble	该属性阻止冒泡（非标准）
e.returnValue	该属性阻止默认事件（非标准）
e.preventDefault()	该方法阻止默认事件（标准）
e.stopPropagation()	阻止冒泡（标准）

e.target与this： e.target点击谁就返回谁，this给谁绑定事件就返回谁

<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);
        }
        //阻止默认事件
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
        })
    </script>

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层结点。

e.stopPropagation() 标准
e.cancelBubble=true 非标准

事件委托

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

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

<ul>
        <li>今天你学习了吗</li>
        <li>今天你学习了吗</li>
        <li>今天你学习了吗</li>
        <li>今天你学习了吗</li>
        <li>今天你学习了吗</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            e.target.style.backgroundColor='pink';
        })
    </script>

常用鼠标事件

contextmenu禁用右键菜单
selectstart禁止选中文字

        // 禁用右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        // 禁止选中文字
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })

鼠标事件对象

常用键盘事件

三个事件的执行顺序是：keydown->keypress->keyup

键盘事件对象

键盘事件对象	说明
keyCode	返回该键的ASCII值

<script>
        document.addEventListener('keyup',function(e){
            console.log('keyup:',e.keyCode);
        })
        document.addEventListener('keypress',function(e){
            console.log('keypress',e.keyCode);
        })
    </script>

keyup和keydown事件不区分字母大小写，keypress事件区分字母大小写 keydown和keypress在文本框里面的特点：他们两个时间触发的时候，文字还没有落入文本框中，使用keyup事件触发的时候，文字已经落入文本框了。

DOM与BOM（三）|青训营笔记

DOM