WebJS的事件-个人笔记

本文从绑定事件的方式对比，事件的两种流，事件对象，事件类型有哪些，事件优化几方面聊一聊WebJs

绑定事件的方式

事件首先分为3种写法

第一种:

根据HTML4新增:在html中的事件属性可以调用JavaScript

<button  onclick="buttonClick()">MyButton</button>

<script>
    function buttonClick() {
        alert("button Click");
    }
</script>

第二种:

找到元素的dom对象,对其属性进行设置,原理和第一种相同

<button id="myButton">MyButton</button>

<script>
    var button=document.querySelector("#myButton");
    button.onclick=function (ev) {
        alert("button Click");
    }
</script>

第三种:

使用事件监听器的方式监听事件,这里会涉及到事件流

    <button id="myButton">MyButton</button>
    <script>
    document.querySelector("#myButton").addEventListener("click", function (event) {
         console.log("冒泡button")

     },false);
     </script>

重点来了:因为事件监听器和属性设置不同,所以第一种第二种会有覆盖关系,而第三种属于观察者模式,不同的方法（引用不同）会增加观察者,即事件可以是多个

事件的两种流

同心圆的问题IE和网景公司给出了不同的事件处理即:
事件流:有两种:冒泡流和捕获流

简单来说:捕获流从最外层到最内层 冒泡流从最内层到最外层

使用在addEventListener中第三个参数设置false为冒泡流，true为捕获流

实际使用中如果对目标对象同时设置了冒泡流和捕获流可能会产生先写先执行不按流的走向执行

如何阻止事件冒泡呢?

事件的对象

事件对象有很多属性，他的产生是由于事件的发生，可以通过调用对象的方法来阻止冒泡

e.stopImmediatePropagation();

事件委托的优缺点

优点：
减少事件注册，节省内存。比如，
在table上代理所有td的click事件。
在ul上代理所有li的click事件。
简化了dom节点更新时，相应事件的更新。比如
不用在新添加的li上绑定click事件。
当删除某个li时，不用移解绑上面的click事件。
缺点：
事件委托基于冒泡，对于不冒泡的事件不支持。
层级过多，冒泡过程中，可能会被某层阻止掉。
理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。



事件委托的优点，一是可以将批量元素监听的任务通过一个监听实现，优化页面性能，二是可以实现对动态生成子元素的监听，某些场景下非常有用