JavaScript implements the Parent-Child dom binding two click events at the same time, one is captured, the other is the method of execution sequence when bubbles are used, and the javascriptdom

JavaScript implements the Parent-Child dom binding two click events at the same time, one is captured, the other is the method of execution sequence when bubbles are used, and the javascriptdom

This example describes how to bind two click events to the parent and child dom in Javascript. One is capture, and the other is sequential execution when bubbles are used. We will share this with you for your reference. The details are as follows:

The execution sequence of events is definitely a headache. What is the trigger sequence of events when the parent element and child element are bound to multiple events, some are bound to the bubble stage, and some are bound to the capture stage? If you only care about this issue, please go down to 3. bind multiple events and trigger them by user behavior. If you want to learn more about the occurrence of events in Javascript, please read them slowly.

1. Sequence of native events

Generally, after a click event is added to a tag, the bound event is executed and then the page is redirected. After an input is bound to a blur event, you enter the content in the input and click the submit button. A blur event occurs first and then a click event occurs. Of course, this is generally used. When a form is submitted in a React project, the click event occurs first, And the blur event does not have time to occur. As a result, the form content is submitted to the background if it is not verified, the solution is to add a 50 ms delay to the click event.

2. Custom events

Manual event triggering is also supported in Javascript. See the following code.

A. addEventListener ('click', function () {console. log (input. value); console. log (this. getAttribute ('href '); console. log (location. href) ;}, false); // a is a var event = document. createEvent ('htmlevents'); // initEvent accepts three parameters: event type, whether to bubble, and whether to block the default event of the browser. initEvent ('click', true, true); event. eventType = 'click'; // triggers the Custom Event a bound to. dispatchEvent (event); // Note: jQuery provides a simpler trigger () method for customizing events.

The types of custom events in Javascript are (that is, parameters in document. createEvent ('htmlevents ):

1. UIEvents: General UI events.
2. MouseEvents: A general mouse event.
3. MutationEvents: A general DOM change event.
4. HTMLEvents: General HTML events.

It is easier to control the occurrence of custom events. When you trigger (dispatchEvent/fireEvent), it will happen.

3. bind multiple events and triggered by user behavior

This situation is the most complex, and it is also the case in the title: the parent element and the child element are bound to multiple events, and some events are in the capture phase, and some events are in the bubble phase.

In the following example, the parent element div is bound to two events (one bubble stage and one capture stage). This is also the case for child elements. How is the event trigger sequence.

var btn = document.querySelector('button');var div = document.querySelector('div');btn.addEventListener('click', function(){  console.log('bubble','btn');},false);btn.addEventListener('click', function(){  console.log('capture','btn');},true);div.addEventListener('click', function(){  console.log('bubble','div');},false);div.addEventListener('click', function(){  console.log('capture','div');},true);

Execution result:

At first glance, this result is a bit messy, but it can be obtained through careful analysis.Conclusion:

Events bound to the clicked element occur in the code order. Other elements capture events first and then bubble events according to W3C standards by bubbling or capturing "perceived" events. The sequence of all events is: capture phase events for other elements-> code ordered events for this element-> bubble phase events for other elements.