Questions JavaScript event mechanism

Questions JavaScript event mechanism

Beginners JS Children's shoes often have a lot of questions, I have many QQ groups have been mixed for several years, and also learned a lot, and will summarize the conclusion of the problem, by the way, the extension of related knowledge ~

If the hasty answer will bubble, this is not very good, a little more rigorous consideration of the 0-level DOM event model, the answer is negative. But in the 2-level DOM event model, the answer is yes, and the question deserves to be explored.

This address: http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html

I. Conclusion of the question

Netscape and Microsoft once the war is still more fiery, at that time, Netscape advocated capture mode, Microsoft advocates bubbling way. Later, the adoption of a compromise way, to quell the war, the establishment of a unified standard-first capture and then bubbling.

There are three stages of triggering an event

1. Document to the event trigger location, capture forward, encounter the same registration event immediately triggering execution
2. arrives at the event location, triggering the event (thank you for the @ Candy Fruit Point, @update 14/2/19 if it registers a bubbling event, also registers a capture event, executed in the Order of registration)
3. Event trigger location toward document direction, bubbling forward, encountering the same registration event immediately triggered

So a lot of people are confused, when we register an event, we usually use a capture or bubbling one:

Obj.addeventlistener ("Click", Func, True); Capture Mode Obj.addeventlistener ("Click", Func, false); Bubbling mode

Events are triggered only once by capture or bubbling. Give me a chestnut:

Click S2 and the result is:

Because this is the capture mode, from document to S2, and then found that both S1 and S2 have registered capture events, then triggered, and then bubbling, did not find the bubbling event, do not perform any action. If you change true to False, you can see the opposite result. In order to better let you understand the entire event mechanism, I give them the capture and bubbling mode to register the event:

The result was so clear:

Second, the misunderstanding

points out two misunderstandings.

1. Registering an event on the same object does not necessarily follow the registration sequence

This, from the above example can be seen, you randomly disrupt the order of four events binding, the results are generally unchanged! This result is caused by the presence of capture mode and bubbling mode. It is noteworthy, however, that the following #5楼 the question raised by the @ Candy fruit because the event destination node is bound to both the bubbling event and the capture event, and the order of execution is executed in the order in which it was bound (this is rare).

2.event.stoppropagation (); Stop the Bubbling of events

This statement can not say that he is wrong, but is incomplete, in addition to preventing the bubbling of events, but also to prevent the continuation of the capture, in short, to prevent the further spread of the event. The following example can be seen:

The result is an output of S1.

Third, expand

1. Use of Stopimmediatepropagation

This thing is a lot of things, use is not very much, we know that stoppropagation can prevent the further propagation of the event, but he cannot stop the other functions bound by this element of the execution, such as we bound in obj func1 and Func2, if we are in func1 Used in the stoppropagation, the FUNC2 will still be executed. If Stopimmediatepropagation were used here, the result would be different, not only to prevent the spread of the event, but also to prevent Func2 's execution. Such as:

The result is:

And then to Evt.stopimmediatepropagation (), which prevents the triggering of the second listener event:

The result is:

2. SetCapture and ReleaseCapture

These two are the event binding functions under IE, as long as we are setcapture on an element, then your mouse action anywhere (MOUSEXXX, etc.) will be triggered on this element (if you bind the event on this element), ReleaseCapture Or lose focus in this window will release this binding ~

Iv. Summary

For this type of knowledge, you should check the official documentation, or read the commentary in the JavaScript authoritative guide, which will often be sorted out later. If you have questions, you can ask in the comments below.

Questions JavaScript event mechanism