javascript event bubbling and capturing (再谈一谈js的事件冒泡和事件补获,看到这篇文章加深了理解)
2015-04-23 10:18
711 查看
原文地址:http://javascript.info/tutorial/bubbling-and-capturing
先给出最终的结论:
All handlers work on bubbling stage excepts
Bubbling/capturing can be stopped by
bubbling:
DOM elements can be nested inside each other. And somehow, the handler of the parent works even if you click on it’s child.
The reason is event bubbling.
For example, the following
That’s because an event bubbles from the nested tag up and triggers the parent.
The main principle of bubbling states:
After an event triggers on the deepest possible element, it then triggers on parents in nesting order.
For example, there are 3 nested divs:
The bubbling guarantees that click on
The order is called a bubbling order, because an event bubbles from the innermost element up through parents, like a bubble of air in the water.
The deepest element which triggered the event is called the target or, the originating element.
Internet Explorer has the
When handlers trigger on parents:
先给出最终的结论:
Summary
Events first are captured down to deepest target, then bubble up. In IE<9 they only bubble.All handlers work on bubbling stage excepts
addEventListenerwith last argument
true, which is the only way to catch the event on capturing stage.
Bubbling/capturing can be stopped by
event.cancelBubble=true(IE) or
event.stopPropagation()for other browsers.
bubbling:
DOM elements can be nested inside each other. And somehow, the handler of the parent works even if you click on it’s child.
The reason is event bubbling.
For example, the following
DIVhandler runs even if you click a nested tag like
EMor
CODE:
< div onclick = "alert('Div handler worked!')" > |
< em >Click here triggers on nested < code >EM</ code >, not on < code >DIV</ code ></ em > |
</ div > |
The main principle of bubbling states:
After an event triggers on the deepest possible element, it then triggers on parents in nesting order.
For example, there are 3 nested divs:
<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
<div class="d1">1<!-- the topmost -->
<div class="d2">2
<div class="d3">3 <!-- the innermost -->
</div>
</div>
</div>
</body>
</html>
The bubbling guarantees that click on
Div 3will trigger
onclickfirst on the innermost element 3 (also caled the target), then on the element 2, and the last will be element 1.
The order is called a bubbling order, because an event bubbles from the innermost element up through parents, like a bubble of air in the water.
this
and event.target
The deepest element which triggered the event is called the target or, the originating element.Internet Explorer has the
srcElementproperty for it, all W3C-compliant browsers use
event.target. The cross-browser code is usually like this:
var target = event.target || event.srcElement |
event.target/srcElement- remains the same originating element.
this- is the current element, the one event has bubbled to, the one which runs the handler.
相关文章推荐
- Javascript Event(事件)的传播与冒泡
- What is event bubbling and capturing
- 韩顺平 javascript教学视频_学习笔记23_js事件驱动机制深入理解_js常用事件_js版计算器
- javascript事件模型框架-eventutil.js
- 我的JavaScript回顾之路_05—0210—js和jq绑定事件的区别/事件冒泡
- 【JavaScript 学习--12】JS深入理解调用栈,事件循环机制,回调队列
- JavaScript:事件对象Event和冒泡
- 悟透JavaScript(理解JS面向对象的好文章)
- 悟透JavaScript(理解JS面向对象的好文章)
- Bubbling and capturing in Javascript
- js事件冒泡、捕获的理解(结合vue)
- 深入理解JavaScript事件冒泡
- js阻止时间冒泡事件——event.stopPropagation()
- 理解JavaScript中的事件路由冒泡过程及委托代理机制
- javascript事件模型框架-eventutil.js
- JavaScript中事件冒泡之实例理解
- js attachEvent and js addEventLintener JS事件
- javascript将DOM事件处理程序封装为event.js 出现的低级错误记录
- JS继承机制--写的比较通俗易懂,一系列文章看文对于你对于JS继承机制的理解会加深很多
- [译] 深入理解 JavaScript 事件循环(二)— task and microtask