javascript的核心就在于事件处理。我们经常会对一个对象进行事件绑定,加上事件处理函数。如果一个元素和它的一个上级节点对于同一个事件都有进行事件处理,哪一个先触发呢?毫无疑问,这决定于浏览器。
假设一个元素element1,它有一个下级元素element2。
如图:
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
| |
-----------------------------------
这两个元素都绑定了click事件,如果用户点击了element2,它在element1和element2上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?
两种模型
以前,Netscape和Microsoft是不同的实现方式。
Netscape中,element1先触发,这就叫做事件捕获。
Microsoft中,element2先触发,这就叫做事件冒泡。
两种事件处理顺序刚好相反。
Explorer只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera’s 和 iCab两种都不支持 。
事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即element1先触发,element2后触发。如图:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 / | |
| ------------------------- |
| 事件捕获 |
-----------------------------------
事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即element2先触发,element1后触发。如图:
/
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| 事件冒泡 |
-----------------------------------
W3C模型
W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。
| | /
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 / | | | |
| -------------------------------- |
| W3C 模型 |
------------------------------------------
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。
比如:
element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
这样绑定,点击element2后
- 从顶到底进行事件捕获,碰到了element1这个采用了事件捕获的元素,则doSomething2函数执行。
- 到达事件源元素element2后,从底到顶进行事件冒泡,碰到了element2这个采用了事件冒泡的元素,则doSomething函数执行。
比如:
element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
这样绑定,点击element2后
- 从顶到底进行事件捕获,没有碰到任何采用事件捕获的元素。
- 到达事件源元素element2后,从底到顶进行事件冒泡,先碰到了element2这个采用了事件冒泡的元素,则doSomething函数执行,再碰到了element1这个采用了事件冒泡的元素,则doSomething2函数执行
与传统绑定事件方式的兼容
在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。
element1.onclick = doSomething2
IE浏览器
如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。
element1.attachEvent("onclick", doSomething2);
element2.attachEvent("onclick", doSomething);
都是事件冒泡,因此,这样绑定后,点击element2后,没有事件捕获,从底到顶进行事件冒泡,先执行doSomething,再执行doSomething2。
分享到:
相关推荐
本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下: 1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...
并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,focus事件, load事件 2、事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素。 js事件捕获一般通过DOM2事件模型...
javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...
事件冒泡、事件捕获和事件委托 在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,...
事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。 dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件
主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料,需要的朋友可以参考下
Javascript事件流(事件捕获、事件冒泡)–>事件委托(代理) Javascript与HTML之间的交互是通过“事件”实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间,当我们与浏览器中的web页面进行特定的交互时...
事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。 <p id=inner>Click me! 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click...
想要了解什么是事件捕获与冒泡,需要先了解什么是事件。 什么是事件? 我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流: 一.什么是事件流: 文档对象模型(DOM)是一个树...
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:...
2022年生动详细解释javascript的冒泡和捕获.docx
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个...
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题,下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程; 事件捕获刚好相反,是从祖先节点到子节点的过程。 给一个...
主要介绍了JS html事件冒泡和事件捕获操作,结合完整实例形式分析了javascript事件冒泡及事件捕获相关原理与实现方法,需要的朋友可以参考下
一、事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又嵌套了另一个元素 代码如下: ———————————– | element1 | | ————————- | | |element2 | | | ————————- | | ...