The event

Concept: An action performed by the user or the browser itself.

Flow of events

Events can be divided by event flow (the order in which they are received from the page) into event bubbling proposed by the IE team, event capture proposed by the Natescape team, and dom2-level events combined.

1. Event bubbling:

An event that is initially received by the most concrete element and then propagated up the hierarchy to non-concrete nodes (documents).

For example:

–> –> < HTML > –> document

2. Event capture:

An event that is initially received by an unspecified node (document) and then propagated down the hierarchy to the most specific element.

For example: document –> < HTML > –> –>

3. DOM event flow:

There are three phases: the event capture phase, the event phase, and the event bubble phase.

The order in which events occur: According to W3C standards, capture events occur first, followed by bubbling events. If an element has already executed two of the same events, but one is capture and one is bubble, only capture events are executed.

father.addEventListener('click'.function(){ console.log('father caught')},true);

father.addEventListener('click'.function(){ console.log('father' bubble.)},false);

son.addEventListener('click'.function(){ console.log('son capture')},true);

son.addEventListener('click'.function(){ console.log('son bubbling')},false); Output order: father capture ->son capture -> Son bubble ->father bubbleCopy the code

Event handlers/event listeners

Concept: The function that responds to an event is called an event handler (event listener). It can be divided into four categories: HTML event handlers, DOM0 level event handlers, DOM2 level event handlers, and IE event handlers.

HTML event handlers:

<input type="button" value="Click Me" onclick="alert('Clicked! ')" />

<input type="button" value="Click Me" onclick="showMessage()" />
Copy the code

Dom0-level event handlers:

var btn = document.getElementById("button");

btn.onclick = function() {alert(this.id)}

btn.onclick = null;
Copy the code

Dom2-level event handler:

var btn = document.getElementById("button");

btn.addEventListener("click".function() {alert(this.id)}, false);

btn.removeEventListener("click".function() {alert(this.id)}, false);

// False is the bubble phase to invoke the event handler, true is the capture phase
Copy the code

IE event handler:

var btn = document.getElementById("button");

btn.attachEvent("onclick".function() {alert("Clicked!")}); 

btn.detachEvent("onclick".function() {alert("Clicked!")}); 
Copy the code

The event object

Concept: When an event on the DOM is triggered, an event object is generated, which contains all information about the object.

Event delegate/event broker

Concept: Instead of setting a listener on the DOM where the event occurred, set a listener on its parent element. Through event bubbling, the parent element can listen for the event on the child element and make different responses by determining the type of the DOM where the event occurred (using the target attribute).

Reason for use/Performance Memory issues: In JS, the number of event handlers added to a page is related to the overall performance of the page. Two aspects: Each function is an object, which occupies memory. The more objects in memory, the worse performance. The number of DOM accesses caused by a large number of event handlers can delay the interaction ready time of the entire page.

<ul id="name">
    <li id="1">a</li>
</ul>

var ul = document.getElementById("name");

ul.addEventListener("click".function(event){
    switch (event.target.id) {
        case "1":
            event.target.innerHTML = "aa";
            break; }},false);
Copy the code