JavaScript events, event flows, event delegates

The event

HTML events HTML events can be browser actions or user actions. You can add event attributes to HTML elements, using JavaScript code to add HTML elements.

Example: The onclick attribute is added to the button element

<button onclick="this.innerHTML=Date()">What time is it now?</button>
Copy the code

Common HTML events:

Flow of events

Event flow describes the order in which events are received on a page. IE and Netscape propose the almost opposite concept of event flow, IE event flow is event bubble flow and Netscape event flow is event capture flow.

Event bubbling Event bubbling is when an event is first received by the most concrete element (the node with the deepest nesting in the document) and then propagated up the hierarchy to the least concrete node (the document). (From inside out)

Example:

<div id = "div">
    <span id="span">
        <a id="aTag">Event test</a>
    </span>
</div>
Copy the code

document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);
function aTag(e) {
    alert("Click on the A TAB.");
}
function span(e) {
    alert("Click on the SPAN TAB.");
}
function div(e) {
    alert(I'm clicking on the div tag);
}
Copy the code

Event capture Event capture is when the event is first received by the less specific node, and the most specific node receives the event last. (From outside to inside)

Example:

document.getElementById("div").addEventListener('click',div,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);
Copy the code

The third argument is set to true to capture events, which defaults to false. Otherwise, the event stream is the same as above, because event bubbling is supported by both IE and standard browsers.

The DOM event flowDom2-level event flow: The event flow defined by dom2-level events includes three phases: event capture phase, target phase, and event bubbling phase.

• Capture phase: Actual target (
  Element) does not receive events during the capture phase, meaning events stop after [document-> HTML ->body]. 【1, 2, 3】
• Target phase: Events occur on target elements. But event handling is seen as part of the bubbling phase.
• Bubble phase: Events are processed from the target element and propagated to the document. [div->body-> HTML ->document] [4, 5, 6, 7]

DOM Event level

Dom0-level events have the advantage of cross-browser binding with the fastest speed. There are two binding modes

• Inline binding (inline model)

Use the function name directly as the attribute value of the attribute in the HTML tag.

<div onclick="btnClick()">button</div>
<script>
function btnClick(){
  console.log("hello");
}
</script>
Copy the code

• Dynamic binding (script model)

By selecting a node in JS and adding the onclick attribute to the node.

<div id="btn">button</div>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
  console.log("Click");
}
</script>
Copy the code

DOM2 level DOM2 level defines two event handlers. (Observer mode)

• AddEventListener () : Adds an event listener
• RemoveEventListener () : Remove the event listener

(3) Content model (DTD, Schemas) and document verification are added to DOM2 at DOM3 level. New events are defined, such as keyboard events, and custom events are also available.

Custom events: Custom events are not triggered natively by the DOM, but are intended to allow developers to create their own events. The CustomEvent to be created can be createEvent(“CustomEvent”); The returned object has an initCustomEvent () method that takes the following four parameters.

• Type: indicates the type of the event to be triggered. For example, “keyDown”, “selectedChange”;
• Bubble (Boolean) : indicates whether the event should bubble;
• Cancelable (Boolean) : indicates whether the event can be cancelled.
• Detail (object) : Any value stored in the detail property of the event object;

Event delegation

An event that is intended to be bound to an element is bound to its parent (or ancestor) element, using the event bubbling principle to trigger the execution effect.

Advantages of event delegation:

• Improve web page performance.
• Events added through event delegates are still valid for later generated elements.

How to use event delegate:

var ul = document.querySelector("ul");
ul.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;

    if(target.nodeName.toLowerCase() === "li"){
        alert("li"); }}Copy the code