W3C DOM event model (Summary)

1. event model

Because the event capture and bubbling models both have their strengths and explanations, the DOM standard supports both capture and bubble types, which can be said to be a combination of the two. It can bind multiple event processors to a DOM element, and within the processing function, thiskeyword still points to the bound Dom element, in addition, the event object is transferred at the first position in the handler number list. The first is the capture-type transfer of events, followed by the bubble-type transfer. Therefore, assume that a processing function not only injects the capture-type event listener, but also the producer bubble-type event listener, in the DOM event model, it will be called twice.

[Oschina]

2. Event Propagation

A) The bubble mode (bubble) IE browser only supports propagation in this form, that is, the event object starts from the target triggered by the event, until the target ancestor node of the same event type is listened on. That is, the time object as a global variable is propagated up along the "element tree ".

B) The capture mode is the opposite of the bubble mode, that is, the event object is transmitted from the outer layer of the target to the target, that is, from the root node of the tree to the leaf node.

3. Event Injection

According to the description in Dom 2 events, the node uses the 'addeventlistener 'and 'removeeventlistener' methods to bind and unbind event listeners.

if(add.addEventListener){    add.addEventListener("click",showMsgB,false);    remove.addEventListener("click",removeE,false);}

Internet Explorer does not have addeventlistener, but it also has its own attachevent, the so-called Microsoft model. The implementation of the two is basically the same as that of attachevent. The first batch number (Event Type) must be added with "on", while the addeventlistener does not. In addition, attachevent does not support event capturing, so there is no third vertex number.

if(add.attachEvent){    add.attachEvent("onclick",showMsgA);    remove.attachEvent("onclick",removeE);}

In browsers that support W3C Dom, the traditional event injection handler is regarded as the injection handler in the bubble stage. Element. onevent = handler ()

4. The difference between stoppropagation, preventdefault and return false

Stoppropagation (): Because an event can be passed in nodes at various levels, whether it is bubble or capture, sometimes we want the event to not be passed after a specific node is run, the stoppropagation () method of the event object can be used.

Preventdefault () blocks the default browser action to be run later.

All trigger events and actions after return false are not executed.

Exam Materials

DOM event model: http://wenku.baidu.com/view/feafe986b9d528ea81c779e3.html

Sd9011: event models differ across browsers: http://w3help.org/zh-cn/causes/SD9011

W3C Dom and its event model: http://blog.csdn.net/yczxwestwood/article/details/6412997

Stoppropagation, preventdefault and return false differences: http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/

W3C DOM event model (Summary)