[Front-end · Interview] Basic questions you may not know about JavaScript (1)

Recently, I am doing a series of front-end interview questions. Interested friends can add attention, welcome to correct me and communicate.

Strive to summarize more of each knowledge point, at least to be able to talk about each knowledge point during the interview, so as not to misfire.

Preface

The interview is often a process of the game, but if you don’t have enough chips, the ending may not be ideal. The increase in chips often depends on our accumulated input.

No matter how small a problem is, as long as you are willing to sink your heart and drill down, you may end up with a forest.

Although the issue I want to record today is relatively basic, it has a lot of connotations at all!

topic

The HTML document structure is as follows:

<div id="parent">
    <child id="child" class="child">
        点我
    </child>
</div>

Execute the following JavaScript code for the first time:

document.getElementById("parent").addEventListener("click", function () {
    alert(`parent 事件触发，` + this.id);
});

document.getElementById("child").addEventListener("click", function () {
    alert(`child 事件触发，` + this.id);
});

Execute another set of JavaScript code for the second time:

document.getElementById("parent").addEventListener("click", function (e) {
    alert(`parent 事件触发，` + e.target.id);
});

document.getElementById("child").addEventListener("click", function (e) {
    alert(`child 事件触发，` + e.target.id);
});

Perform a set for the third time:

document.getElementById("parent").addEventListener("click", function (e) {
    alert(`parent 事件触发，` + e.target.id);
}, true);

document.getElementById("child").addEventListener("click", function (e) {
    alert(`child 事件触发，` + e.target.id);
}, true);

Questions are as follows:

After clicking the div whose id is child, what are the execution results of these three JavaScript codes?

Digression

The content and knowledge points involved in this topic are very basic, nothing more than event capture, event triggering, event bubbling, plus the meaning of the third parameter in the addEventListener interface.

As long as you have a firm grasp of the basic knowledge of JavaScript, then this question is a sub-question, easy and enjoyable; but once you have a blind spot in this piece of knowledge, it becomes a proposition, and you can do it and cherish it.

DOM element event execution sequence

The execution sequence of DOM elements on HTML pages generally has three stages:

• Event capture
• Event trigger
• Event bubbling

Borrow a picture on the Internet to illustrate this process:

The sequence of triggering of the standard dom event stream is: first capture and then bubbling , that is, when a dom event is triggered, the event will be captured first, and the event will be bubbling through event propagation after the event source is captured.

In the browser, event bubbling is performed by default, that is, we generally do not observe the event capture phase, such as onclick and other events.

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

About addEventListener()

The basic syntax of addEventListener is:

target.addEventListener(type, listener, useCapture);

• type Event type.
• The listener event triggers the anonymous function that is actually executed.
• userCapture is optional. The type is Boolean, which means will execute the event capture phase .

About this and target in listener

• When an EventListener is registered to the EventTarget while the EventTarget is processing the event, it will not be triggered immediately, but may be triggered in the event triggering phase after the event flow, for example, it may be added in the capture phase and then triggered in the bubbling phase .
• Generally speaking, the value of this is a reference to the element that triggered the event. When using addEventListener() to register an event for an element, the value of this in the handle is a reference to the element. It is the same as the value of the currentTarget attribute of the event parameter passed to the handle.

Problem solving

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

• The first result is: "child event triggered, child" pops up first, and then "parent event triggered, parent" pops up.
• The second result is: "child event triggered, child" pops up first, and then "parent event triggered, child" pops up.
• The third result is: "parent event triggered, child" pops up first, and then "child event triggered, child" pops up.

Summarize

The topic is not difficult, and the knowledge points involved are even more elementary, but the details must be paid attention to!

~

~ End of this article, thanks for reading!

~

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

Hello, everyone, I am the author Programming Samadhi Hermit King , my is "161152267d14d2 Programming Samadhi ", welcome to pay attention, I hope you can give us your advice!

Come, with expectations, I have Moxiang to greet you! You return, no matter the gains or losses, only with the lingering rhyme as a gift!

Pay equal attention to knowledge and skills, both internal and external skills, both theory and practice must be grasped, and both hands must be hard!