How do I make DOM nodes listen for events

The essence of an event is a way of communication between the components of a program, as well as an implementation of asynchronous programming.

The DOM node’s event operations (listening and firing) are defined in the EventTarget interface. This interface is deployed on all node objects.

This interface provides three instance methods:

  • Listener functions for bind events:addEventListener()
  • Remove listeners for events:removeEventListener()
  • Triggering event:dispatchEvent()

EventTarget.addEventListener()

target.addEventListener(type, listener[, useCapture]);
Copy the code

A listener function that defines a specific event on the current node or object. Once this event occurs, the listener function is executed. This method does not return a value.

Three parameters are accepted:

  • type: Event name, case sensitive
  • listener: Listener function. This listener function is called when an event occurs.
  • useCapture: This parameter is optional and is a Boolean value.trueIndicates that the listener will fire during the capture phase. The default value isfalse(Listeners are only fired during the bubble phase).

The second argument can be an object with a handleEvent method in addition to the listener function, and has the same effect as the listener function.

The third argument, in addition to the Boolean useCapture, can also be a listener configuration object, customizing the event listening behavior:

element.addEventListener('click'.function(event){
    // Execute code only once
}, {once: true});
Copy the code

The addEventListener() method can add multiple different listener functions for the same event on the same object. These functions are fired in the order they are added, that is, they are added first. However, if you add the same listener function for the same event more than once, the function is executed only once, and the superfluous addition is automatically removed.

Listen for this inside the function, which points to the object of the current event.

// The HTML code is as follows
// <p id="para"> hello </p>

var para = document.getElementById('para');
para.addEventListener('click'.function(e){
    console.log(this.nodeName); // this points to the event object para
});
Copy the code

2. Event model

The browser’s event model responds to events through listener functions. After the event occurs, the browser listens for the event and executes the corresponding listener function. This is the main programming approach of event-driven programming.

1. Dissemination of events

Propagation between child elements and parent elements, including Capture phase, Target phase and Bubbling phase.

This three-phase propagation model allows the same event to be triggered on multiple nodes.

In short, event capture looks for listeners from the outside in, and event bubbling looks for listeners from the inside out.

2. How to cancel bubbling

The capture phase cannot be cancelled, but bubbling can be cancelled.

E.toppropagation () interrupts bubbling and stops the browser from going up. It is used to encapsulate some separate components.

Iii. Event Delegation (Event Agent)

Event Proxy (Delegation) : Because events are propagated up to the parent node during the bubble phase, you define the listeners of the child node on the parent node, and the listeners of the parent node handle the events of multiple child elements in a unified manner.

That is, the event bubbling mechanism is used to bind the events that the inner layer needs to respond to to the outer layer.

var ul = document.querySelector('ul');

ul.addEventListener('click'.function (event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code}});Copy the code

In the code above, the listener for the click event is defined on the

    node and handles the click event for the child node

  • .

The advantage of this is that instead of defining a listener on each

  • node, you can define a listener on the parent node to handle events on multiple child nodes, and the listener will still be valid if the child nodes are added later.

    • Another scenario is that I need to listen for the click event of an element that does not currently exist. Again, I define the listener function on the parent node. After the click, THE bubble phase can determine whether I want to listen for the element.

    Therefore, the advantages of event delegation are as follows: 1. 2. You can listen for dynamic elements.

    Refer to the link

    Netpath JavaScript tutorial

    This article is for personal study notes only.