1、事件冒泡


要理解事件冒泡,就得先知道事件流。事件流描述的是从页面接收事件的顺序,比如如下的代码:

<body>
  <div>
    click me!
  </div>
</body>

如果在body和div内都注册了click的事件监听,之后又点击了div区域,是body先响应还是div先响应?有意思的是,当时的浏览器开发团队IE和Netscape提出了差不多完全相反的事件流的概念。IE的事件流是事件冒泡流,而Netscape提出的事件流是事件捕获流。

IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。如上代码,点击click事件会这样传播:div->body->html->document(虽然我没写html元素,但是页面上默认还是会存在的)

现代的所有浏览器都支持事件冒泡,但还是有些细微差别。IE5.5以及更早版本中的事件冒泡会跳过<html>元素(从body直接跳到document)。IE9、ff、chrome和safari则将事件一直冒泡到window对象。

2、事件捕获


Netscape团队则提出另一种事件流-事件捕获。事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件,如果仍以上面的代码举例:document->html->body->div。

虽然事件捕获是Netscape唯一支持的事件流模型,但是IE9、Safari、chrome、opera和ff目前也都支持这种事件流模型。尽管“DOM2级事件”规范要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。

因为老版本的浏览器不支持事件捕获,所以我们建议使用事件冒泡。

3、DOM事件流


“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。还是上面的代码作为例子,单击div元素会按照如下顺序触发事件:document->html->body->div->body->html->document。

在DOM事件流中,实际的目标(div)在捕获阶段不会接收到事件。这意味着在捕获阶段,事件到body就停止了,下一个阶段是“处于目标”阶段,于是事件在div上发生,并在事件处理中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件又传播回文档。但是多数支持DOM事件流的浏览器都实现了一种特定的行为:即使“DOM2级事件”规范明确要求捕获阶段不会涉及目标事件,但IE9、safari、chrome、ff和opera9.5及更高版本都会在捕获阶段触发事件对象上的事件,结果就是有两个机会在目标对象上面操作。(IE9、opera、ff、chrome和Safari都支持DOM事件流,IE8及更早版本不支持DOM事件流)。

4、事件处理程序


响应某个事件的函数就叫做事件处理程序

DOM0级的事件处理程序很简单,onclick就是常用的DOM0级事件处理函数,只会在冒泡阶段被处理。

而“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()removeEventListener(),所有DOM节点都包含这两个方法,并且它们都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用。DOM2级方法添加事件处理程序的好处是可以添加多个事件处理程序,会按照添加顺序被处理(无论是捕获还是冒泡)。这也是为什么DOM0级事件兼容各种浏览器,我们却还是要使用DOM2的原因之一。

var div = document.getElementById('myDiv');
div.addEventListener('click', function() {
  console.log(this.id);
}, true);

div.addEventListener('click', function() {
  console.log('hello world');
}, true);

而IE与DOM不同,它有自己的方法:attachEvent()detachEvent(),这两个方法接受相同的两个参数:事件处理程序名称和事件处理程序函数。由于IE8以及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段(所以不需要第三个参数)。

var div = document.getElementById('myDiv');
div.attachEvent('onclick', function() {
  console.log('hello world');
});

注意第一个参数是onclick,而非DOM标准的click。在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域,在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行,而在使用attachEvent()方法的情况下,事件处理程序在全局作用域中运行,因此this等于window(这点要特别注意!!!)。attachEvent()也能添加多个事件处理程序,但是事件的执行顺序和添加顺序相反

5、跨浏览器的事件处理程序


因为浏览器之间的差异(其实就是IE大家都懂的),所以需要编写跨浏览器的事件处理程序。

var EventUtil = {
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {  // DOM2
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {  // IE
      element.attachEvent('on' + type, handler);
    } else {  // DOM0
      element['on' + type] = handler;
    }
  },

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

6、事件对象


在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息。坑爹的是DOM中的事件对象和IE又有不同的玩法。

先来说说DOM中的:

var div = document.getElementById('myDiv');
div.onclick = function(e) {
  console.log(e.type);
};

div.addEventListener('click', function(e) {
  console.log(e.type);
}, false);

上面代码我们应该都不陌生,分别实现了DOM0级和DOM2级的事件对象。

e有很多的属性和方法,这里提几个常用的。targetcurrentTarget,target指的是事件的真正目标,而currentTarget指的是当前的目标,正是利用target我们可以做事件代理

要阻止特定事件的默认行为,我们可以使用preventDefault()方法,例如链接的默认行为就是在被单击时会导航到其href指定的url,如果你想阻止这个默认行为,那么通过链接的onclick事件处理程序可以取消它:

var link = document.getElementById('myLink');
link.onclick = function(e) {
  e.preventDefault();
};

只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。

另外,stopPropagation()方法用于立即停止事件在DOM层中的传播,即取消进一步的事件捕获或冒泡。

var div = document.getElementById('myDiv');
div.onclick = function(e) {
  console.log('click!');
  e.stopPropagation();
};

document.body.onclick = function(e) {
  console.log('hello world');
};

而IE中的事件对象是这么用的:

var div = document.getElementById('myDiv');
div.onclick = function() {
  var e = window.event;
  console.log(e.type);
};

div.attachEvent('onclick', function(e) {
  // 也可以通过window.e访问
  console.log(e.type);
});

IE中的event对象也有很多属性和方法,比如srcElement就是和DOM中的target属性相同,而returnValue属性相当于DOM中的preventDefault()方法,它们的作用都是取消给定事件的默认行为。只要将该值设置为false,就可以阻止默认行为。相应地,canceBubble属性和DOM中的stopPropagation()方法作用相同,因为IE只支持冒泡,所以它只能取消事件冒泡。

跨浏览器的事件对象:

var EventUtil = {
  getEvent: function(e) {
    return e ? e : window.event;
  },

  getTarget: function(e) {
    return e.target || e.srcElement;
  },

  preventDefault: function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  },

  stopPropagation: function(e) {
    if (e.stopPropagation) {
      e.stopPropagation()
    } else {
      e.cancelBubble = true;
    }
  }
}

7、事件委托


有了以上作为基础,事件委托应该是很简单了。什么是事件委托?对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如,click事件会冒泡到document层次,也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。

举个经常举的例子,比如有如下代码:

<ul id='myLink'>
  <li id='a'> apple </li>
  <li id='b'> banana </li>
  <li id='c'> orange </li>
</ul>

需要的效果是每点击相应的<li>选项,alert它里面的单词,或许很简单:

var lis = document.getElementsByTagName('li');
for(var i = 0, len = lis.length; i < len; i++) {
  lis[i].onclick = function() {
    alert(this.innerHTML);
  };
}

但是如上代码绑定了三个事件,我们知道每个事件绑定都需要占用一定的内存,更糟糕的是,如果在代码执行过程中,动态地又添加了一个li,这时它没有绑定click的事件,我们还需要手动添加!这时,我们就可以用到事件委托技术:

var f = document.getElementById('myLink');
f.onclick = function(e) {
  console.log(e.target.innerHTML);
};

好吧,就是这么简单!

JavaScript高级程序设计笔记 事件冒泡和事件捕获的更多相关文章

  1. javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记

    1.事件流:描述的是从页面中接收事件的顺序. 2.事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档). 3.事件捕获 ...

  2. JavaScript高级程序设计笔记(一)

    ---恢复内容开始--- 前三章为基础知识,为了方便以后查看,所以比较啰嗦.这里对函数的基本操作没有记录. 1.JavaScript的实现 虽然 JavaScript 和 ECMAScript 通常都 ...

  3. JavaScript高级程序设计笔记之面向对象

    说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,Jav ...

  4. javascript高级程序设计--笔记01

    概述 JavaScript的实现包含三个部分: 1  核心(ECMAScript)   提供核心语言功能 2  文档对象模型(DOM)  一套提供了访问以及操作网页内容的API 3  浏览器对象模型( ...

  5. <javascript高级程序设计>笔记

    1.要讲一个值转换成其对应的Boolean类型 ,可以调用转型函数Boolean(). var message=“hello world!”; var messageAsBoolean=Boolean ...

  6. javaScript高级程序设计笔记 2

    Undefinde Null Boolean Number String    基本类型 Object    引用类型 只有引用类型才能动态的添加属性 赋值基本类型和引用类型也不相同,复制的基本类型的 ...

  7. javaScript高级程序设计笔记 1

    核心  ECMAScript 文档对象模型  DOM 浏览器对象模型 BOM 延迟脚本  defer typeof操作符      判断字符类型  返回   undefined  boolean  s ...

  8. Javascript高级程序设计笔记 <第五章> 引用类型

    一.object类型 创建object实例的方式有两种: //第一种使用new操作符跟构造函数 var person= new Object(); person.name="小王" ...

  9. Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)

    var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun ...

随机推荐

  1. 2014.1.23 Discuz论坛迁移+VPS配置手记

    虽说这也不是我第一次转移这个论坛了,但毕竟还是第一次自己配置VPS,写点东西记一下 一:关于VPS的配置 1.用TeamViewer连接服务器 这个VPS的IDC自己带有一个远程控制的页面,用浏览器打 ...

  2. Asp.net MVC验证那些事(1)-- 介绍和验证规则使用

    数据的有效性验证,是程序开发中必不可少的环节.这篇文章,我们将用一个实例来说明如何在MVC中使用Validation来保证无论是新增或者更新数据的时候,都必须符合我们定义的验证规则,否则就会提示错误. ...

  3. mysql数据校验之字符集问题

    场景:主库DB:utf8字符集备库DB:gbk字符集 需求:校验主备数据是否一致,并且修复 校验过程:设置主库连接为utf8,设置备库连接为gbk,分别进行查询,将返回的的结果集按记录逐字段比较. 显 ...

  4. 挖一挖C#中那些我们不常用的东西之系列(2)——IsXXX 系列方法

    不知道有人做没做过对日外包,如果做过的话,那么对vb.net应该非常熟悉了,当年我刚毕业的时候也做过四个月的外包,那种日子简直 不是人过的,就连大楼下面买珠宝的阿姨都说,这些孩子,只看过他们上班,就没 ...

  5. Spark大数据的学习历程

    Spark主要的编程语言是Scala,选择Scala是因为它的简洁性(Scala可以很方便在交互式下使用)和性能(JVM上的静态强类型语言).Spark支持Java编程,但对于使用Java就没有了Sp ...

  6. ReactNative之坑爹的在线安装

    编译一个github上ReactNative应用,根据说明只有3步: npm installreact-native run-androidenjoy 但几个步骤实在是一波三折充满着坎坷,一点都不en ...

  7. bg激活后台运行的服务

    按redis重启来做案例 ./redis-server Ctrl+z让执行的命令在后台暂停 [1]+ Stopped ./redis-server 这个时候他是把这个服务放到后台了,可是ctrl+z是 ...

  8. 《2016ThoughtWorks技术雷达峰会----雷达新趋势》

    雷达新趋势    徐昊,ThoughtWorks中国区CTO 1.Open Source  open source 已经从一个简简单单的软件代码组织方式变成一种文化,一种运动.当谈到Open Sour ...

  9. POJ 1724 ROADS【最短路/搜索/DP】

    一道写法多样的题,很具有启发性. 具体参考:http://www.cnblogs.com/scau20110726/archive/2013/04/28/3050178.html http://blo ...

  10. Unity自动构建

    Jenkins/Hudson Jenkins的前身是Hudson(Sun开发),2010年从Hudson分支出来.由于Sun被Oracle收购,Oracle声称拥有Hudson的商标所有权,Hudso ...