javascript事件冒泡和事件捕获细�

事件冒泡和事件捕获分别由微软和网景提出，都是为了解决页面中的事件流(事件序列)问题。

div id='外部' p id='内部'点击我！/p/div在上面的代码中，div元素中有一个p子元素。如果两个元素都有click处理程序，我们怎么知道哪个函数会先被触发呢？

为了解决这个问题，微软和网景提出了两个几乎完全相反的概念。

事件冒泡

微软提出了一个叫做事件冒泡的事件流。事件冒泡可以比喻为往水里扔石头，气泡总是会从水底冒出来。也就是说，事件将从最里面的元素开始，向上扩展到文档对象。

因此，在上面的例子中，在事件冒泡的概念下，点击事件的顺序应该是p-div-body-html-document

事件捕获

Netscape提出了另一个事件流，称为事件捕获。与事件冒泡相反，事件将从最外层开始到最具体的元素。

在上例中，在事件捕获的概念下，点击事件的顺序应该是document-html-body-div-p。

addEventListener的第三个参数

“DOM2级事件”中指定的事件流同时支持事件捕获阶段和事件冒泡阶段，作为开发人员，我们可以选择调用事件处理函数的阶段。

AddEventListener方法用于绑定特定元素的事件处理程序，这是JavaScript中常见的方法。AddEventListener有三个参数：

元素的第一个参数。addeventlistener (event，function，use capture)是要绑定的事件，第二个参数是触发事件后要执行的函数。且第三个参数默认值为false，这意味着在事件冒泡阶段调用事件处理函数，如果参数为true，则在事件捕获阶段调用处理函数。请看例子。

事件代理

在实际开发中，我们可以利用事件流的特点，使用一种叫做事件代理的方法。

ul id=' color-list ' lired/li/li libue/Li lig reen/Li liblac/Li Li white/Li/ul如果单击页面上的Li元素，然后以Li输出颜色，我们通常会这样写：

复制代码如下：(function(){ var color _ list=document . getelementbyid(' color-list ')；var colors=color _ list . getelementsbytagname(' Li ')；for(var I=0；icolors.lengthi ){ colors[i]。addEventListener('click '，showColor，false)；};函数show color(e){ var x=e . target；alert('颜色为' x . innerhtml ')；};})();

利用事件流的特性，我们可以通过只绑定一个事件处理程序来实现这一点：

复制代码如下：(function(){ var color _ list=document . getelementbyid(' color-list ')；color _ list . addeventlistener(' click '，showColor，false)；函数show color(e){ var x=e . target；if(x . nodename . tolowercase()==' Li '){ alert('颜色为' x . innerhtml ')；} }})();

使用事件代理的优势不仅在于将多个事件处理函数减少到一个，还在于对不同的元素有不同的处理方法。如果其他元素(例如a、span等。)被添加到上面的列表元素中，我们不需要再循环将事件绑定到每个元素，并且我们可以直接修改事件代理的事件处理函数。

泡泡还是捕捉？

对于事件代理，在事件捕获或事件冒泡方面没有明显的优势或劣势。但是，由于事件冒泡的事件流模型兼容所有主流浏览器，所以从兼容性的角度来看，建议使用事件冒泡模型。

IE浏览器兼容

IE浏览器与addEventListener不太兼容，只能使用IE9或以上版本。

为了兼容旧版本的IE浏览器，可以使用IE的attachEvent功能

object . setcapture()；对象的两个参数。attachevent(事件、函数)类似于addEventListener，后者是事件和处理程序。默认情况下，在事件冒泡阶段调用处理程序。需要注意的是‘on’前缀(‘onload’‘onclick’等。)应该在编写事件名称时添加。

以上就是本文的全部内容，希望大家喜欢。