This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

Recently, I have been doing a series of summary questions on the front end, interested friends can add attention, welcome correction, communication.

Strive for each knowledge point to be able to sum up some more, at least to do in the interview, for each knowledge point can be kan, not dumb fire.

preface

Interviews are often part of a game, but if you don’t have enough chips in your hand, it may not end well. And the increase in chips often depends on our cumulative input.

Even if a small problem, as long as you are willing to sink down and drill, the last may be a forest.

Today I want to record this problem, although more basic, but, the connotation is not a little bit!

The title

There is an HTML document structure like this:

<div id="parent">
    <child id="child" class="child">Am I</child>
</div>
Copy the code

Execute the following JavaScript code for the first time:

document.getElementById("parent").addEventListener("click".function () {
    alert(The 'parent event is triggered,' + this.id);
});

document.getElementById("child").addEventListener("click".function () {
    alert('Child event is triggered,' + this.id);
});
Copy the code

The second time another set of JavaScript code is executed:

document.getElementById("parent").addEventListener("click".function (e) {
    alert(The 'parent event is triggered,' + e.target.id);
});

document.getElementById("child").addEventListener("click".function (e) {
    alert('Child event is triggered,' + e.target.id);
});
Copy the code

The third time to perform a set:

document.getElementById("parent").addEventListener("click".function (e) {
    alert(The 'parent event is triggered,' + e.target.id);
}, true);

document.getElementById("child").addEventListener("click".function (e) {
    alert('Child event is triggered,' + e.target.id);
}, true);
Copy the code

The questions are as follows:

What is the result of the execution of these three copies of JavaScript code after clicking on the div with ID child?

digression

Event capture, event firing, event bubbling, and a third parameter in the addEventListener interface.

As long as the basic knowledge of JavaScript is more solid, then this question is to send points, easy and happy; But once there is a blind spot to this piece of knowledge, it has become a sending proposition, and line and cherish.

DOM element event execution order

There are generally three stages in the execution order of events for DOM elements on HTML pages:

  • Event capture
  • Events trigger
  • The event bubbling

To illustrate the process, borrow a picture from the Internet:

The dom standard event stream is triggered in the following order: capture first and then bubble. That is, when a DOM event is triggered, event capture is carried out first, and event bubble is carried out through event propagation after the event source is captured.

By default, event bubbling is performed in the browser, meaning that we typically do not observe the event capture phase, such as onclick events.

If we want to observe the event capture phase, we need to implement it with the addEventListener interface.

About the addEventListener ()

The basic syntax for addEventListener is:

target.addEventListener(type, listener, useCapture);
Copy the code
  • Type Indicates the type of the event.
  • The listener event triggers the actual execution of the anonymous function.
  • UserCapture Optional. The type is Boolean, indicating whether to perform the event capture phase.

About the THIS and target in the listener

  • When an EventListener is registered with an EventTarget while the EventTarget is processing an event, it is not triggered immediately, but may be triggered later in the event-triggering phase of the event flow, for example, it may be added during the capture phase and then triggered during the bubble phase.
  • Normally, the value of this is a reference to the element that triggered the event. When you register an event for an element using addEventListener(), the value of this in the handle is a reference to that element. This is the same value as the currentTarget property of the event parameter passed to the handle.

The problem solving

From the above analysis, we should be able to get the answer to that question:

  • The first time the result is “Child event triggered, child” and then “parent event triggered, parent”.
  • The second time, the result is “Child event triggered, child” and then “parent event triggered, Child”.
  • The third time, “Parent event triggered, Child” is displayed, and then “Child event triggered, Child” is displayed.

conclusion

The topic is not difficult, the knowledge points involved are primary, but the details must be paid attention to!

~

Thanks for reading!

~

Learn interesting knowledge, make interesting friends, and create interesting souls!

Hello everyone, I am the author of “programming Samadhi” Hermit King, my public number is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have the ink to greet! You return, regardless of gain and loss, only with aftertaste!

Both knowledge and skill, internal force and external work, both theory and practice should grasp, both hands should be hard!