dom事件总结

DOM事件的级别

DOM0

element.onclick = function(){

}

DOM2

element.addEventListener('click', function(){

}, false);

DOM3

element.addEventListener('keyup', function(){

}, false);

上面的第三参数中，true表示事件在捕获阶段触发，false表示事件在冒泡阶段触发（默认）。如果不写，则默认为false。

DOM事件模型,DOM事件流

DOM事件模型

• 捕获：从上往下
• 冒泡：从下（目标元素）往上

DOM事件流

• 1.捕获：从window对象传到目标元素
• 2.目标阶段：事件通过捕获，到达目标元素，这个阶段为目标阶段
• 3.冒泡：从目标元素传到window对象

DOM事件捕获的具体流程

捕获的流程

• 传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素

测试：

window.addEventListener("click", function () {
     alert("捕获 window");
 }, true);

 document.addEventListener("click", function () {
     alert("捕获 document");
 }, true);

 document.documentElement.addEventListener("click", function()) {
     alert("捕获 html");
 }, true);

 document.body.addEventListener("click", function () {
     alert("捕获 body");
 }, true);

 fatherBox.addEventListener("click", function () {
     alert("捕获 father");
 }, true);

 childBox.addEventListener("click", function () {
     alert("捕获 child");
 }, true);

获取 body 节点，方法是: document.body; 获取 html 节点，方法是: document.documentElement;

冒泡的流程

• 与捕获的流程相反

Event对象常用api方法

阻止默认事件

event.preventDefault();

阻止冒泡

• w3c方法（火狐，谷歌，IE11）

event.stopPropagation();

• IE10

event.cancelBubble = true;

• 兼容写法

   box3.onclick = function (event) {

        alert("child");

        //阻止冒泡
        event = event || window.event;

        if (event && event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

设置事件优先级

 event.stopImmediatePropagation();

同时注册了事件A、事件B 要求：单击按钮时，只执行事件A，不执行事件B 在事件A的响应函数中加入这句话

属性4，属性5(事件委托中用到)

    event.currentTarget   //当前所绑定的事件对象。在事件委托中，指的是【父元素】。

    event.target  //当前被点击的元素。在事件委托中，指的是【子元素】。

自定义事件

自定义事件的代码如下：

    var myEvent = new Event('clickTest');
    element.addEventListener('clickTest', function () {
        console.log('smyhvae');
    });

	//元素注册事件
    element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest

上面这个事件是定义完了之后，就直接自动触发了。在正常的业务中，这个事件一般是和别的事件结合用的。比如延时器设置按钮的动作：

    var myEvent = new Event('clickTest');

    element.addEventListener('clickTest', function () {
        console.log('smyhvae');
    });

    setTimeout(function () {
        element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
    }, 1000);

事件委托

作用

• 支持为同一个DOM元素注册多个同类型事件
• 可将事件分成事件捕获和事件冒泡机制

实现方式

• addEventListener(type,listener,useCapture)

type: 必须,String类型,事件类型 listener: 必须,函数体或者JS方法 useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段

优点

• 提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
• 动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。