关于事件

关于事件

DOM事件流

事件流描述的是从页面中接受事件的顺序
事件发生的时候会在元素节点之间按照特点的传播顺序，整个传播过程叫DOM事件流

三个阶段

• 捕获阶段
• 当前目标阶段
• 冒泡阶段

注意

• js代码只能执行捕获或者冒泡其中一个阶段
• inclick和attachEvent只能得到冒泡阶段
• addEventListener（type，listener，[useCapture]）第三个参数如果是ture，表示在事件捕获阶段调用事件处理程序；如果式false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
• 有些事件没有冒泡：onblur，onfocus，onmouseenter，onmouseleave

①注册事件

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

传统注册方式

• 利用on开头的事件onclick
• 如btn.onclick = function(){}
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册事件

• addEventListener()是一个方法
• 有兼容性问题IE9
• 同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

addEventListener()事件监听方式

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

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

如下

btns[1].addEventListener('click',function(){
   alert(22);
   })
btns[1].addEventListener('click',function(){
   alert(33);
   })
   // 可以绑定两个函数

②删除事件

removeEventListener需要单独声明一个函数

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


    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() { 
            alert(11);
            //1.传统方式删除事件
            divs[0].onclick = null;
        }
        

        //2.
        divs[1].addEventListener('click',fn)
        //里面的fn不需要加小括号，因为不能写匿名函数因此加此fn

        function fn() {
            alert(22);
            divs[1].removeEventListener('click',fn);
        }

        //3.
        divs[2].attachEvent('onclick',fn1);

        function fn1(){
            alert(33);
            divs[2].detachEvent('onclick',fn1);
        }

    </script>

事件对象

<div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclcik = function(event) {}
        //1.event就是一个事件对象，写到我们得侦听函数的小括号里，当作形参来看
        //2.事件对象只有有了事件才会存在，它是系统创建的，不需要传递参数、
        //3.事件对象 是我们事件的一系列相关数据和合集。与事件相关的，比如鼠标点击事件
    </script>
    ```