DOM事件总结

一.Dom事件的级别

1.

 element.onclick = function () {

  }

2.

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

  }, false);

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

3.

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

    }, false);

DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。

二.Dom事件模型

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

完整的事件流，分三个阶段：

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

捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。

• PS1：第一个接收到事件的对象是 window（有人会说body，有人会说html，这都是错误的）。
• PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。

• 如果想获取 body 节点，方法是：document.body；
• 但是，如果想获取 html节点，方法是document.documentElement

三.event事件的几个Api

1.

    event.preventDefault();

• 解释：阻止默认事件。
• 比如，已知<a>标签绑定了click事件，此时，如果给<a>设置了这个方法，就阻止了链接的默认跳转。

2.阻止冒泡

 box3.onclick = function (event) {

        alert("child");

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

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

上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了

3.事件委托

 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);