HTML DOM元素的事件的Bubbling 和 Capturing
来源:互联网 发布:linux shell 权限不够 编辑:程序博客网 时间:2024/04/28 05:38
Bubbling and capturing
- Bubbling
this
andevent.target
- Stopping the bubbling
- Capturing
- Summary
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 DIV
handler runs even if you click a nested tag like EM
or CODE
:
<
div
onclick
=
"alert('Div handler worked!')"
>
<
em
>Click here triggers on nested <
code
>EM</
code
>, not on <
code
>DIV</
code
></
em
>
</
div
>
That’s because an event bubbles from the nested tag up and triggers the parent.
Bubbling
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:
01
<!DOCTYPE HTML>
02
<
html
>
03
<
body
>
04
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"example.css"
>
05
06
<
div
class
=
"d1"
>1
<!-- the topmost -->
07
<
div
class
=
"d2"
>2
08
<
div
class
=
"d3"
>3
<!-- the innermost -->
09
</
div
>
10
</
div
>
11
</
div
>
12
13
</
body
>
14
</
html
>
The bubbling guarantees that click on Div 3
will trigger onclick
first 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.
Click below to see it bubble:
this
and event.target
The deepest element which triggered the event is called the target or, the originating element.
Internet Explorer has the srcElement
property for it, all W3C-compliant browsers use event.target
. The cross-browser code is usually like this:
var
target = event.target || event.srcElement
When handlers trigger on parents:
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.
In the example below, each DIV
has an onclick
handler which outputs both target
and this
.
Click on a div.
Note that:
- the
target
is constant through all bubbling process, this
changes and gets highlighted.
In W3C-compliant browsers this
is also available as event.currentTarget
.
attachEvent
does not pass this
or event.currentTarget
at all.
Stopping the bubbling
The bubbling goes right to the top. When an event occurs on an element - it will bubble up to <HTML>
, triggering handlers on it’s way.
But a handler may decide that event is fully processed and stop the bubbling.
The code is:
- For W3C-compliant browsers:
event.stopPropagation()
- For IE<9:
event.cancelBubble =
true
The cross-browser-code:
01
element.onclick =
function
(event) {
02
event = event || window.event
// cross-browser event
03
04
if
(event.stopPropagation) {
05
// W3C standard variant
06
event.stopPropagation()
07
}
else
{
08
// IE variant
09
event.cancelBubble =
true
10
}
11
}
There is a one-lined variant too:
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=
true
)
If the element has several handlers on same event, then handlers are independent. All of them get executed..
For example, if there are two onclick
handlers on the same link, then stopping bubbling in one of them has no effect on the other one. Also, the browser doesn’t guarantee the order in which they trigger.
Capturing
In all browsers, except IE<9, there are two stages of event processing.
The event first goes down - that’s called capturing, and then bubbles up. This behavior is standartized in W3C specification.
According to this model, the event:
- Captures down - through 1 -> 2 -> 3.
- Bubbles up - through 3 -> 2 -> 1.
All methods of event handling ignore the caputiring phase. Using addEventListener
with last argumenttrue
is only the way to catch the event at capturing.
elem.addEventListener( type, handler, phase )
phase = true
- The handler is set on the capturing phase.
phase = false
- The handler is set on the bubbling phase.
Click in a div
below to see capturing in action (no IE<9):
It should be 1 -> 2 -> 3.
Source JavaScript of the example:
1
var
divs = document.getElementsByTagName(
'div'
)
2
3
for
(
var
i=0; i<divs.length; i++) {
4
divs[i].addEventListener(
"click"
, highlightThis,
true
)
5
}
Click to open in the playground: tutorial/browser/events/bubbling/capture/index.html.
In real-life the capturing phase is rarely used. But..
There are events which don’t bubble, but can be captured. For example,onfocus/onblur
.
Now let’s assign handlers at both stages.
Click on a div
below to see the event processing order (no IE<9):
It should be 1 -> 2 -> 3 -> 3 -> 2 -> 1.
Source JavaScript of the example:
1
var
divs = document.getElementsByTagName(
'div'
)
2
3
for
(
var
i=0; i<divs.length; i++) {
4
divs[i].addEventListener(
"click"
, highlightThis,
true
)
5
divs[i].addEventListener(
"click"
, highlightThis,
false
)
6
}
Click to open in the playground: tutorial/browser/events/bubbling/both/index.html.
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
addEventListener
with last argumenttrue
, which is the only way to catch the event on capturing stage. - Bubbling/capturing can be stopped by
event.cancelBubble=true
(IE) orevent.stopPropagation()
for other browsers.
- HTML DOM元素的事件的Bubbling 和 Capturing
- 关于DOM事件的Bubbling和Capturing
- Event Capturing 和 Event bubbling 区别
- DOM元素的事件捕获和冒泡
- Bubbling and capturing
- DOM标准与IE的html元素事件模型区别
- DOM标准与IE的html元素事件模型区别
- 值得收藏的HTML DOM事件和鼠标键盘事件
- html内的Dom事件
- Bubbling and capturing in Javascript
- HTML DOM 事件,可用于定义js在HTML元素中不同操作的处理程序
- HTML 元素的 ondragenter 事件
- 添加html元素的事件
- JavaScript的DOM对象,控制HTML元素
- JavaScript的DOM对象控制HTML元素
- 如何让动态创建的页面元素响应用户事件 (HTML/javascript/jQuery/Ajax/DOM)
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- 事件处理程序和支持它们的HTML元素
- Visibility in Bad Weather from a Single Image---2008CVPR ,Tan
- JS的两个妙用
- struct linger 用法
- .net生态环境的弱化
- 悔学
- HTML DOM元素的事件的Bubbling 和 Capturing
- [oracle]ORA-00942: 表或视图不存在错误的一个可能原因
- 静态成员函数,静态数据成员
- OCP-1Z0-051-V9.02-17题
- arx函数
- Android学习笔记16:Button控件图文混排效果的实现
- CCNode
- 装修医疗网站推广方案
- Android.mk文件语法