DOM中的事件总结

 

一. 在 html 中直接绑定

　　在 HTML 中绑定事件叫做内联绑定事件，HTML 的元素中有如 onclick 这样的 on*** 属性，它可以给这个 DOM 元素绑定一个类型的事件，主要是这样的：

　　<div onclick="***">博客园</div>

　　这里的 *** 有两种形式：

1. 用字符串表示一段函数

　　<div onclick="var a = 1; console.log(a); ">博客园</div>

2. 用函数名表示

　　<div onclick="foo(this)">博客园</div>

　　这里需要添加 script 去定义函数：

　　<script>
 　　 function foo(_this) {
    　　console.log(_this);
    　　console.log(this);
  　　}
　　</script>

　　然而这内联的方式绑定时间不利于分离，所以一般我们不推荐这种做法，所以也就不再多阐述了

 

二. 在 JavaScript 中绑定

1. onclick

　　来看例子：

　　<div id="btn">博客园</div>

　　document.getElementById('btn').onclick = function (e) {
  　　console.log(this.id);
  　　console.log(e);
　　};

　　观察 console.log：

　　btn
　　MouseEvent {isTrusted: true, screenX: 65, screenY: 87, clientX: 65, clientY: 13…}

　　首先，我们获取到了 dom 元素，然后给它的 onclick 属性赋值了一个函数；点击 dom 我们发现那个函数执行了，同时发现函数中的 this 是指向当前的这个 dom 元素；细细一想，其实这和前面用的在 html 中内联绑定函数是一样的，我们同样是给 dom 的 onclick 属性赋值一个函数，然后函数中的 this 指向当前元素，只是这个过程这里我们是在 js 中做的；而还有一点区别就是前面的是赋值一段 js 字符串，这里是赋值一个函数，所以可以接受一个参数：event，这个参数是点击的事件对象。

　　用赋值绑定函数的一个缺点就是它只能绑定一次：

　　例如：

　　document.getElementById('btn').onclick = function (e) {
 　　 console.log(this.id);
　　};
　　document.getElementById('btn').onclick = function (e) {
  　　console.log(this.id);
　　};

　　可以看到这里只打印了一次 btn。

2. addEventListener

　　这个才是我们需要重点介绍的一个函数

1.)语法：

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

　　target : 表示要监听事件的目标对象，可以是一个文档上的元素 Document 本身，Window 或者 XMLHttpRequest；

　　type : 表示事件类型的字符串，比如: click、change、touchstart …；

　　listener : 当指定的事件类型发生时被通知到的一个对象。该参数必是实现 EventListener 接口的一个对象或函数。

　　useCapture : 设置事件的捕获或者冒泡 (后文阐述) ，true: 捕获，false: 冒泡，默认为 false。

　　上个例子：

　　<div id="btn">博客园</div>

　　var btn = document.getElementById('btn');

　　btn.addEventListener(‘click’, foo1);

　　function foo1(event) {
  　　console.log(this.id);
  　　console.log(event);
　　}

　　观察 console.log：

　　btn
　　MouseEvent {isTrusted: true, screenX: 37, screenY: 88, clientX: 37, clientY: 14…}

　　监听函数中的 this 指向当前的 dom 元素，函数接受一个 event 参数。

2.)绑定多个函数

　　addEventListener 可以给同一个 dom 元素绑定多个函数：

　　<div id="btn">博客园</div>

　　var btn = document.getElementById('btn');

　　btn.addEventListener('click', foo1);
　　btn.addEventListener('click', foo2);

　　function foo1(event) {
  　　console.log(666);
　　}

　　function foo2(event) {
 　　 console.log(888);
　　}

　　可以看到 console.log：

　　666
　　888

　　我们可以看到两个函数都执行了，并且执行顺序按照绑定的顺序执行。

　　改变一下，如果我们的 useCapture 参数不同呢？
　　看下面 3 组对比：

例子：1

　　var btn = document.getElementById('btn');

　　btn.addEventListener('click', foo1, true);
　　btn.addEventListener('click', foo2, true);

　　function foo1(event) {
  　　console.log(666);
　　}

　　function foo2(event) {
  　　console.log(888);
　　}

例子：2

　　var btn = document.getElementById('btn');

　　btn.addEventListener('click', foo1, true);
　　btn.addEventListener('click', foo2, false);

　　function foo1(event) {
  　　console.log(666);
　　}

　　function foo2(event) {
  　　console.log(888);
　　}

例子：3

　　var btn = document.getElementById('btn');

　　btn.addEventListener('click', foo1, false);
　　btn.addEventListener('click', foo2, true);

　　function foo1(event) {
  　　console.log(666);
　　}
　　function foo2(event){

　　console.log(888)

　　}

　　console.log打印出来的值并没有改变，所以执行顺序只和绑定顺序有关和 useCapture 无关。

　　结论：
　　　　我们可以给一个 dom 元素绑定多个函数，并且它的执行顺序按照绑定的顺序执行。

3.)同一个元素绑定同一个函数

　　我们给一个 dom 元素绑定同一个函数两次试试：

　　<div id="btn">博客园</div>

　　var btn = document.getElementById('btn');

　　btn.addEventListener('btn', foo1);
　　btn.addEventListener('btn', foo1);

　　unction foo1(event) {
  　　console.log(666);
　　}

　　观察 console.log:

　　666 

　　可以看到函数只执行了一次；

换一种方式：

　　var btn = document.getElementById('btn');

　　btn.addEventListener('btn', foo1, true);
　　btn.addEventListener('btn', foo1, false);

　　function foo1(event) {
  　　console.log(666);
　　}

　　观察 console.log:

　　666
　　666 

　　可以看到函数执行了两次。

　　结论：
　　　　我们可以给一个 dom 元素绑定同一个函数，最多只能绑定 useCapture 类型不同的两次。

3. attachEvent

　　addEventListener 只支持到 IE 9，所以为了兼容性考虑，在兼容 IE 8 以及以下浏览器可以用 attachEvent 函数，和 addEventListener 函数表现一样。在IE浏览器中我们可以使用attachEvent.形如：object.attachEvent(event,function);这里需要注意的是event的格式都是on+事件名，如：btn事件->onclick

　　例子：

　　var btn = document.getElementById("btn");

　　btn.attachEvent("onclick",test1);

　　　　function test1(){

　　console.log("666");

　　}

 

三. 事件的解绑

　　与事件绑定相对应的就是事件解绑了。

1. 通过 dom 的 on** 属性设置的事件

　　对于 Bind in HTML 和 dom.onclick 绑定的事件都可以用 dom.onclick = null 来解绑事件。

2. removeEventListener

　　通过 addEventListener 绑定的事件可以使用 removeEventListener 来解绑， removeEventListener 接受的参数和 addEventListener 是一样的

　　<div id="btn">博客园</div>

　　var btn = document.getElementById('btn');

　　btn.addEventListener('click', foo1);

　　function foo1(event) {
 　　 console.log(666);
　　}
　　btn.removeEventListener('click', foo1, true);

　　这里发现事件并没有取消绑定，发现 removeEventListener 的 useCapture 的参数原来和绑定时候传入的不一致，我们改成 false 之后发现事件取消了。

　　结论：
　　　　对于使用 removeEventListener 函数解绑事件，需要传入的 listener useCapture 应和 addEventListener 一致才可以解绑事件。

3. detachEvent

　　通过attachEvent绑定的事件可以使用detachEvent来解绑，可接受的参数和attachEvent是一样的，如下：btn.detachEvent("on" + type, handler)

 

四. DOM事件流

　　DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。

1. 捕获阶段（Capture Phase）

　　事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径，在冒泡阶段，事件会通过这个路径回溯到文档跟节点。

2. 目标阶段（Target Phase）

　　当事件到达目标节点的，事件就进入了目标阶段。事件在目标节点上被触发，然后会逆向回流，直到传播至最外层的文档节点。

3. 冒泡阶段（Bubble Phase）

　　事件在目标元素上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来，如果没有事件冒泡，我们需要监听很多不同的元素来确保捕获到想要的事件。

4. 回到 addEventListener

　　我们来做几个小对比：

　　<div id="btn1">
  　　　　<div id="btn2">博客园</div>
　　</div>

例子： 1

　　document.getElementById('btn1').addEventListener('click', foo1, false);
　　document.getElementById('btn2').addEventListener('click, foo2, false);

　　function foo1(event) {
 　　 console.log(666);
　　}
　　function foo2(event) {
  　　console.log(888);
　　}

　　console.log：

　　888
　　666

　　这里两个事件都是冒泡类型，所以是从内到外；

例子： 2
　　document.getElementById('btn1').addEventListener('click', foo1, true);
　　document.getElementById('btn2').addEventListener('click', foo2, true);

　　function foo1(event) {
  　　console.log(666);
　　}
　　function foo2(event) {
 　　 console.log(888);
　　}

　　console.log：

　　666
　　888

　　这里两个事件都是捕获类型，所以是从外到内；

例子： 3
　　document.getElementById('btn1').addEventListener('click', foo1, false);
　　document.getElementById('btn2').addEventListener('click', foo2, true);

　　function foo1(event) {
 　　 console.log(666);
　　}
　　function foo2(event) {
  　　console.log(888);
　　}

　　console.log：

　　888
　　666

　　btn1事件是冒泡，btn2 事件是捕获，根据 dom 的事件流，先执行了捕获阶段（这里是目标阶段）再到冒泡阶段。

例子： 4

　　document.getElementById('btn1').addEventListener('click', foo1, true);
　　document.getElementById('btn2').addEventListener('click', foo2, false);

　　function foo1(event) {
  　　console.log(666);
　　}
　　function foo2(event) {
  　　console.log(888);
　　}

　　console.log：

　　666
　　888

　　btn2 事件是冒泡，btn1事件是捕获，根据 dom 的事件流，先执行了捕获阶段（这里是目标阶段）再到冒泡阶段。

 

五. 阻止 冒泡／捕获

　　<div id="btn1">
  　　　　<div id="btn2">博客园</div>
　　</div>

　　document.getElementById('btn1').addEventListener('click', foo1);
　　document.getElementById('btn2').addEventListener('click', foo2);

　　function foo1(event) {
  　　console.log(666);
　　}
　　function foo2(event) {
  　　event.stopPropagation();

　　这样foo1中的代码就不会执行了，阻止冒泡
  　　console.log(888);
　　}

 

六. 事件委托

　　事件委托是利用事件的冒泡原理来实现的，页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个冒泡机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

七. JS中事件兼容性封装

　　Var  EventUtil={

1.)添加事件方法

　　addHandler：function(element,type,handler){

   　　 if(element.addEventListener){

       　　 element.addEventListener(type, handler, false);

　　}else if (element.attachEvent){

        　　element.attachEvent("on" + type, handler);

   　　 } else {

      　　 element["on" + type] = handler;

   　　 }

　　}

2.)移除之前添加的事件方法

　　removeHandler：function(element, type, handler){ 

       　　if (element.removeEventListener){

          　　 element.removeEventListener(type, handler, false);

       　　} else if (element.detachEvent){

          　　 element.detachEvent("on" + type, handler);

      　　 } else {

           　　element["on" + type] = null;

       　　}

  　　 }

 

3.)获取事件及事件对象目标

 　　getEvent: function(event){

     　　return event ? event : window.event;

　　 },

　　 getTarget: function(event){

     　　return event.target || event.srcElement;

 　　}

4.)阻止浏览器默认事件的兼容性写法

　　preventDefault: function(event){ 

        　　if (event.preventDefault){

            　　event.preventDefault();

       　　 } else {

            　　event.returnValue = false;

        　　}

    　　}

5.)阻止事件冒泡的兼容性写法

　　stopPropagation: function(event){ 

        　　if (event.stopPropagation){

            　　event.stopPropagation();

        　　} else {

            　　event.cancelBubble = true;

        　　}

   　　 }

　　}

　　下面我就举一个例子演示一下用法：

　　　　<button id=”btn”>点击事件</button>

　　　　var btn=document.getElementById(“btn”);

　　　　EventUtil.addHandler(btn,”click”,function(){

　　　　console.log(“这是一次简单的演示”)

　　　　})