Event order

Two models

W3C model

The web developer, can choose whether to register an event handler in the capturing or in the bubbling phase.

This is done through the addEventListener() method. If its last argument is true the event handler is set for the capturing phase, if it is false the event handler is set for the bubbling phase.

該函數最後一個參數設爲真，把事件句柄註冊在捕捉階段，如果設爲假，則把事件句柄註冊在冒泡階段。

Example

element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)

If the user clicks on element2 the following happens:

1. The click event starts in the capturing phase. The event looks if any ancestor element of element2 has a onclick event handler for the capturing phase.
2. The event finds one on element1. doSomething2() is executed.
3. The event travels down to the target itself, no more event handlers for the capturing phase are found. The event moves to its bubbling phase and executes doSomething(), which is registered to element2 for the bubbling phase.
4. The event travels upwards again and checks if any ancestor element of the target has an event handler for the bubbling phase. This is not the case, so nothing happens.

element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)

Now if the user clicks on element2 the following happens:

1. The click event starts in the capturing phase. The event looks if any ancestor element of element2 has a onclick event handler for the capturing phase and doesn’t find any.
2. The event travels down to the target itself. The event moves to its bubbling phase and executes doSomething(), which is registered to element2 for the bubbling phase.
3. The event travels upwards again and checks if any ancestor element of the target has an event handler for the bubbling phase.
4. The event finds one on element1. Now doSomething2() is executed.
   

Compatibility with traditional model

In the browsers that support the W3C DOM, a traditional event registration

element1.onclick = doSomething2;

is seen as a registration in the bubbling phase.

Turning it off

What you first need to understand is that event capturing or bubbling always happens, any event ends up on the document.

Usually you want to turn all capturing and bubbling off to keep functions from interfering with each other. Besides, if your document structure is very complex (lots of nested tables and such) you may save system resources by turning off bubbling.

當你的頁面非常複雜時，你會想要關掉捕捉和冒泡功能，以防止互相干擾和節省系統資源。

The browser has to go through every single ancestor element of the event target to see if it has an event handler. Even if none are found, the search still takes time.

window.event.cancelBubble = true; // Microsoft model
e.stopPropagation(); // W3C model

 

For a complete cross-browser experience do

function doSomething(e)
{
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

Setting the cancelBubble property in browsers that don’t support it doesn’t hurt.

CurrentTarge

An event has a target or srcElement that contains a reference to the element the event happened on.

It is very important to understand that during the capturing and bubbling phases (if any) this target does not change.

element1.onclick = doSomething;
element2.onclick = doSomething;

If the user clicks on element2 doSomething() is executed twice. But how do you know which HTML element is currently handling the event?target/srcElement don’t give a clue, they always refer to element2 since it is the original source of the event.
To solve this problem W3C has added the currentTarget property. It contains a reference to the HTML element the event is currently being handled by.

Unfortunately the Microsoft model doesn’t contain a similar property. You can also use thethis keyword.

jQuery .bind() vs .on()

.bind()  Attach a handler to an event for the elements.

.on()  Attach an event handler function for one or more events to the selected elements.

When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.

文章地址：點擊打開鏈接