在js中,“事件冒泡”是什么意思?

JavaScript023

在js中,“事件冒泡”是什么意思?,第1张

事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

即子级元素先触发,父级元素后触发。

js的优点:

在JavaScript这样的用户端脚本语言语言出现之前,传统的数据提交和验证工作均由用户端浏览器通过网络传输到服务器上进行。如果数据量很大,这对于网络和服务器的资源来说实在是一种无形的浪费。而使用JavaScript就可以在客户端进行数据验证。

JavaScript可以方便地操纵各种浏览器的对象,可以使用JavaScript来控制浏览器的外观,状态甚至运行方式,可以根据用户的需要“定制”浏览器,从而使网页更加友好。

JavaScript可以使多种任务仅在用户端就可以完成而不需要网络和服务器的参与,从而支持分布式的运算和处理。

事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

假设一个元素div,它有一个下级元素p。

元素

这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?

两种模型

以前,Netscape和Microsoft是不同的实现方式。

Netscape中,div先触发,这就叫做事件捕获。

Microsoft中,p先触发,这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla,

Opera

7

Konqueror两种都支持,旧版本的Opera's

iCab两种都不支持

事件捕获

当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡

当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

W3C模型

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式

在一个支持W3C

DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

ele.onclick

=

doSomething2

IE浏览器

如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

ele.attachEvent("onclick",

doSomething2)

附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。

事件的传播是可以阻止的:

在W3c中,使用stopPropagation()方法

在IE下设置cancelBubble

=

true;

在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~

3.阻止事件的默认行为,例如click

后的跳转~

在W3c中,使用preventDefault()方法;

在IE下设置window.event.returnValue

=

false

冒泡:已图中H2为例,点击H2时,会弹出冒泡,但是在H2的父级绑定点击事件后也会有,而    H2的父级的父级也会有,这样一直往上找,知道醉外一层则停止。

捕获则则冒泡刚好相反,冒泡是向外找,而捕获则是像内找。