preface

This paper mainly introduces:

  1. DOM Event level
  2. DOM event model
  3. DOM event delegate

1 DOM event level

DOM levels can be divided into four levels: DOM 0, DOM 1, DOM 2, and DOM 3.

DOM events are divided into three levels: DOM 0 level event processing, DOM 2 level event processing, and DOM 3 level event processing.

There are no DOM 1 level events because there is no DOM 1 level event content.

1.1 DOM 0-level events

Before we look at DOM 0-level events, it’s important to take a look at HTML event handlers, the earliest of their kind, as follows:

<button type="button" onclick="showFn()"></button>

<script>
    function showFn() {
        alert('Hello World');
    }
</script>
Copy the code

The above code triggers the showFn method by defining an onclick attribute directly in the HTML code. The biggest disadvantage of such an event handler is the strong coupling between HTML and JS, which requires two changes whenever the function name needs to be changed. The advantage, of course, is that you don’t need to manipulate the DOM to bind events.

A DOM 0-level event assigns a function to an event-handling property, such as:

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    btn.onclick = function() {
        alert('Hello World');
    }
    // btn.onclick = null; Unbundling event
</script>
Copy the code

The above code defines an ID for the button, obtains the id from JS, and assigns a function to an event handler property, onclick. This method is DOM 0-level event handler. You can also unbind events by assigning null to the event handling property.

summary

  • el.onclick=function(){}
  • DOM 0-level event handlers execute their events in the bubbling phase.
  • The disadvantage of DOM 0-level event handlers is that you cannot bind multiple events of the same type to the same element.

1.2 DOM level 2 events

DOM level 2 events build on DOM level 0 events to compensate for the inability of a single handler to bind multiple handlers simultaneously, allowing multiple handlers to be added to a single handler. The code is as follows:

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    function showFn() {
        alert('Hello World');
    }
    
    btn.addEventListener('click', showFn, false);
    // btn.removeEventListener('click', showFn, false); Unbundling event
</script>
Copy the code

DOM level 2 events define two methods, addEventListener and removeEventListener, to bind and unbind events, respectively. All have the same three parameters, as follows:

el.addEventListener(eventName, callback, useCapture)

  • EventName: eventName (without on)
  • Callback: A callback function that is injected with an argument to the current event object, event, when an event is triggered
  • UseCapture: Default The default or false, which indicates that the event is executed during the bubble phase

Note that IE8 does not support addEventlistener and removeEventListerner. You need to use attachEvent and detachEvent.

btn.attachEvent('onclick', showFn); // Bind events
btn.detachEvent('onclick', showFn); // Unbind events
Copy the code

summary

  • el.addEventListener(eventName, callback, useCapture)
  • DOM 2-level event handlers can bind multiple events of the same type to the same element

1.3 DOM level 3 Events

More event types have been added to the DOM 2 level events.

  • UI events that are triggered when the user interacts with elements on the page, such as Load and Scroll
  • Focus events, which are triggered when an element gains or loses focus, such as blur and focus
  • Mouse events, such as dblclick and mouseup, are triggered when the user performs actions on the page using the mouse
  • A wheel event that is triggered when a mousewheel or similar device is used, such as mousewheel
  • A text event that is triggered when text is entered into a document, such as textInput
  • Keyboard events, such as keyDown and keyPress, are triggered when users perform operations on the page using the keyboard
  • A composite event that is triggered when a character is entered for the IME, such as compositionStart
  • Change event, triggered when the underlying DOM structure changes, such as DOMsubtreeModified
  • DOM level 3 events also allow developers to customize events.

2 DOM event model

Over the course of browser development, two different specifications have emerged

  • Internet Explorer uses event bubbling, propagating from small to large on the target node.
  • Netscape browsers use event capture, propagating from large to small at the target node.
  • In order to standardize the development standards, the Web standard developed by W3C adopts two schemes at the same time, event capture and event bubbling can be used, but event bubbling is used by default.

The DOM event model is divided into capture and bubbling. Propagation between child elements and parent elements after an event occurs. This spread is divided into three stages:

  1. Capture phase: the phase in which events propagate from the Window object down to the target node;
  2. Target phase: the phase in which the actual target node is processing events;
  3. Bubbling phase: The phase in which events propagate bottom-up from the target node to the Window object.

3 Event Delegation (Event Agent)

How it works: Since events propagate up to the parent node during the bubbling phase, you can define the listener function of the child node on the parent node, and the listener function of the parent node can process the events of multiple child elements uniformly.

Delegate a function that responds to an element’s event to the element’s outer element. When the event responds to the element that needs to be bound, the event bubble mechanism triggers the binding event of its outer element, and then executes the function on the outer element.

Advantages:

  • Reduce memory consumption

Suppose we have a list with a large number of list items, and we need to respond to an event when each list item is clicked

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>.<li>item n</li>
</ul>
Copy the code

If you bind a function to each list item, it is very expensive in memory and requires a lot of performance in terms of efficiency. Using event agent, we only need to give the parent container ul binding approach, so no matter which a descendant elements, click will be according to the transmission mechanism of transmission of bubbling, click behavior triggers the container, and then the corresponding method to carry out, according to the event source, we can know is who, click to do different things.

  • Dynamically bound events

In many cases, it is necessary to dynamically add or remove list elements through AJAX or user operations, so each change needs to re-bind events to the newly added elements and unbind events to the elements to be deleted.

Using event delegates to bind events to the parent level has nothing to do with the increase or decrease of the target element. Execution to the target element is matched in response to the actual execution of the event function, which can reduce a lot of rework.

4 Reference Materials

  • DOM event mechanism
  • JavaScript event delegate details