dom事件编程

"事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。

1、EventTarget接口

dom的事件操作（监听和触发），都定义在这个接口上。

该接口有三个方法：

addEventListener：绑定事件的监听函数

removeEventListener：移除事件的监听函数

dispatchEvent：触发事件

1.1、addEventListener

格式：target.addEventListener(type,listener[,useCapture]);

"useCapture"：监听函数是否在捕获阶段触发。默认为false（监听函数在冒泡阶段触发）。

addEventListener方法可以给当前对象的同一事件，添加多个监听函数，执行顺序是先添加先执行。但是如果监听函数也是同一个，则只执行一次。

1.2、removeEventListener()

removeEventListener方法用来移除addEventListener方法添加的事件监听函数。

1.3、dispatchEvent()

当前节点触发指定事件，从未触发监听的函数。这个方法类似于jQuery中的trigger方法，主动触发某个element上的监听方法。

温馨提示：上面说到了可以使用脚本去触发一个事件的发生，那如果要区分这个事件是用户真实触发还是脚本触发该怎么办呢？可以使用event对象下的 isTrusted 属性。event.isTrusted：用户触发的事件返回true，脚本触发的返回false。

2、监听函数

dom提供三种方式，用来为事件绑定监听函数。

2.1、on-属性

就是行内点击事件，

点我

2.2、element节点的事件属性

window.onload=doSomething;

div.onclick=function(event){console.log('触发事件');};

使用这个方法指定的监听函数，只会在冒泡阶段触发。

2.3、addEventListener方法

使用 html标签 on-属性，违反了html和js代码分离原则；使用 element节点的事件属性 的缺点是，同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。因此，这两种方法都不推荐使用。

推荐使用 addEventListener 有点如下：

①、可以针对同一个事件，添加多个监听函数。

②、能够指定在哪个阶段（捕获阶段还是冒泡阶段）触发回监听函数。

③、除了DOM节点，还可以部署在window、XMLHttpRequest等对象上面，等于统一了整个JavaScript的监听函数接口。

2.4、this对象的指向

使用addEventListener 触发函数中的this指向 element对象。

使用on-属性，触发函数中的this不会指向触发事件的元素节点。

3、事件传播

3.1、事件传播的三个阶段

事件在dom之间传播有三个阶段：捕获阶段、目标阶段、冒泡阶段

事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.dody）。也就是说，如果元素中有一个

元素，点击该元素。事件的传播顺序，在捕获阶段依次为window、document、html、body、div，在冒泡阶段依次为div、body、html、document、window。

注意，用户点击网页的时候，浏览器总是假定click事件的目标节点，就是点击位置的嵌套最深的那个节点（嵌套在节点的节点）。所以，最底层那个节点的捕获阶段和冒泡阶段，都会显示为target阶段。

如果希望事件到某个节点为止，不再传播，可以使用事件对象的stopPropagation方法。

4、自定义事件和事件模拟

除了浏览器预定义的那些事件，用户还可以自定义事件，然后手动触发。

这种方式IE不支持。

5、事件冒泡

e.preventDefault(); // 只阻止事件的默认行为，但不能阻止事件往上冒泡。

window.event.returnValue = false; //IE中阻止函数器默认动作的方式 

e.stopPropagation(); // 可以阻止事件冒泡

e.cancelBubble = true; // IE下阻止事件冒泡

比较暴力的方式有：

return false; // 阻止事件冒泡

扩展：

e.stopImmediatePropagatio() //同一节点添加多个点击事件时，使用这个API可以控制后续 handle是否执行

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

比如一个 div 添加 addEventListener  click事件，添加两次，当我们点击这个div时，这两个监听事件都会执行，那能不能控制在第一个监听回调函数，控制第二个回调函数不执行呢？可以。在第一个回调函数执行 e.stopImmediatePropagatio() ，第二个函数就不会执行了