JS's event Model __JS

JS event model is divided into the original event model and standard event model, I write articles only on their own learning notes, so these two models I do not elaborate, today's key to record is the standard event model

The standard event model is standardized by the Level 2 DOM standard, although IE does not support this model. In the standard event model, the concept of event listeners has been added, and the JavaScript authoritative guide describes this as: Level 2 DOM (standard event model) is written in a language-independent manner, and it is clear that the event listener is an object rather than a simple function. The JavaScript bindings of the DOM use JavaScript function handles to replace the need to use a JavaScript object. Event listeners can use AddEventListener () to invoke handle registration, just as they are the method of the target element, the above description is actually easy to understand, but with the event spread, the problem begins to complicate.

JS time transmission is divided into capture, target node, bubble these three stages, meaning what is it. Suppose a div contains an input button, and when you register a click event handle for this input button, the div Click can also capture this method (bubble), which can be read. Suppose the following procedure:

The DOM of HTML has two elements, namely child nodes and parent nodes, and the parent node contains child nodes.

document.getElementById ("child Nodes"). AddEventListener ("click", Function (e) {alert (e.currenttarget.id)},false);

If the event handle is registered for a child node, then the parent node must also be able to handle the click event, and the value of the clicked alert is the ID of the parent node.

Here's the problem: At first I think that since it's an event listener registered for a child node, how does the parent node handle the event? No time listener was registered for the parent node. I did not understand this process, and later thought, is not with the "event listener is an object rather than a simple function," since it is an object, then I first registered for the event listener object A click Time, It then tells the document those DOM element objects to associate the click Listener object with the last value of the AddEventListener, but the function (e) {alert (e.currenttarget.id)} has different arguments for the method. The Click event of different DOM elements is passed to the event handler's e is different, and the above example sees E.currenttarget as the current DOM element. So whether the above DOM element object is associating the click Listener object with the different E passes past. Finally, I conclude that the DOM element object should be associated with this click Listener object by clicking on the DOM element object first to determine if there is a click Listener event, and then to determine whether the DOM element corresponds to this event through the information at the time of the Listener event registration. In response, the event object (that is, e of the above method) is passed through the argument. Of course I'm just speculating here, there is no document basis, if the shrimp see this article can be pointed twos about this event model. Here's what I copied from W3school. Description of Event Propagation: Event Propagation

In Level 2 DOM, event propagation is divided into three phases:

First, the capture phase. Events are passed down the document tree to the target node from the Documents object. If any of the ancestors of the target were specifically registered to capture event handles, they are run during the event propagation process.

The second stage occurs on the target node itself. The appropriate event handle on a direct registration hit Target will run. This is similar to the event handling method provided by the level 0 event model.

Third, the foaming stage. At this stage, the event propagates from the target element back or bubbles back to the document hierarchy of the Documents object.

Http://www.w3school.com.cn/xmldom/prop_event_bubbles.asp