catalog:
1,Event mechanism concept
2,Method of registering event listening
3,Event operation
4,Bubbling and trapping

1. Event mechanism

Problem Description:
1) How does the event mechanism work? How is it different from the event loop mechanism?

Answer:
Event mechanism is different from event loop. It is user interaction level and depends on event flow.

Dom event flow is divided into three stages: event capture, reaching the target and event bubbling. Event capture occurs first, which makes it possible to intercept events in advance. The actual target element then receives the event. The last stage is bubbling, which is the latest stage to respond to events.

Therefore, the browser monitors user operations at all times. Once an event is triggered, the corresponding event flow will be triggered. At this time, if the event monitoring function is registered, it will be triggered. If multiple events are triggered at the same time, the event response will be executed in turn.

The user can manually add an event response function by registering event listening for fixed elements.

2. Method of event listening

Problem Description:
1) How many methods? What's the difference?
2) The third parameter of addeventlistner?

1) There are three ways to listen for events
HTML event handling method: each event supported by a specific element can be specified in the form of HTML attributes using the name of the event handler. At this time, the value of the attribute must be executable JavaScript code, which will normally be bound as an event handler. The biggest drawback of this method is to mix HTML code with JS code, and it is not applicable when there are many elements that need event processing.

<input type="button" value="Click Me" onclick="console.log('Clicked')"/>

Dom0 event handling method: assign a function to an event handler attribute. Its biggest limitation is that an event can only be bound to one event handler. If multiple events are bound, the latter will overwrite the former.

let btn = document.getElementById("myBtn"); 
btn.onclick = function() { 
    console.log(this.id); // "myBtn" 
};

Dom2 event handler: two methods are defined: addEventListener() and removeEventListener(). These two methods are exposed to all DOM nodes. They receive three parameters: event name, event handler function and a Boolean value. true means to call the event handler in the capture phase and false (default) means to call the event handler in the bubble phase.

Unlike method 2, addEventListener can register multiple listeners for an event.

let btn = document.getElementById("myBtn"); 
btn.addEventListener("click", () => { 
   console.log(this.id); 
}, false);

It should be noted that several parameters of removeEventListener must be exactly the same as those of addEventListener before listening can be cancelled.

let btn = document.getElementById("myBtn"); 
let handler = function() { 
   console.log(this.id); 
}; 
btn.addEventListener("click", handler, false); 
// cancel
btn.removeEventListener("click", handler, false); // It works!

2) Third parameter of addEventListener
In the old version of DOM specification, the third parameter is set by default. The current event listening is executed in the bubbling (default) / capture phase. It is a boolean value, which is false by default. However, currently, the third parameter has more complex configuration. It is set as an object called option. The available options are as follows:

3. Event operation

Problem description
1) What is the event object of event processing? What information can be obtained?

Answer:
Regardless of the listening method, event is the only variable passed to the event handler, which is called the event object. Event objects contain properties and methods related to specific events, and their contents vary as appropriate. However, the event event object contains some public properties and methods.

4. Bubbling and trapping

Problem Description:
1) If the event handling of the ancestor element has been captured, will the descendant trigger event listening?
2) How do capture and bubble break the default behavior?

1) The answer is yes
Since the three stages of the event flow are fixed, that is, whether or not event listening and processing are bound, events will pass through all involved elements in the three stages of the event flow. The blocking method is to manually add and block the default behavior.

2) Methods to prevent default behavior
Use event Stoppropagation () prevents the default behavior of the bubble and capture phases, leaving subsequent elements unaffected.

<script>
    let ul = document.getElementsByClassName('ulList');
    let li1 = document.getElementsByClassName('first');

    console.log('ul', ul);
    ul[0].addEventListener('click', (event) => {
      event.stopPropagation();
    }, false)

    li1[0].addEventListener('click', (event) => {
      console.log(event.target);
    }, false)
</script>

In addition, to prevent the default event response behavior of the element itself, you have to use event Preventdefault(), e.g

let a = document.getElementById('alink');
a.addEventListener('click', (e) => {
      e.preventDefault();
})