Learn about JavaScript event streams and event handlers _javascript tips

This article describes the JavaScript event flow and event handlers, shared for everyone to refer to, the specific contents are as follows

I. Flow of events

The event flow describes the order in which events are received from the page. The event flow of IE is an event bubbling stream, while Netscape Communicator event flow is the event capture stream.

Second, event bubbling

That is, when the event is started, it is received by the most specific element and then propagated up to the less specific node. Such as:

<! DOCTYPE html>
 
 

When you click on the div element in the page, the Click event is propagated in the following order:

• div element
• BODY element
• HTML element
• Document Object

Third, event capture

The idea of event capture is that the most specific node should receive the event at the end. Event capture is intended to capture the event before it reaches its destination.

When you click on the div element in the page, the Click event is propagated in the following order:

• Document Object
• HTML tags
• Body Label
• div tags
  

While the specification requires that events be propagated from the Document object, browsers generally start capturing events from the Window object. Event bubbling is generally used because older browsers do not support it.

Iv. DOM Event Flow

The event flow under "DOM2 level events" includes three phases: the event capture phase, the target phase, and the event bubbling phase .

In the DOM event stream, the actual target does not receive events during the capture phase. This means that during the capture phase, events from document to HTML and then to body stop. The next stage is the "in target" phase, so events occur in the div and are considered part of the bubbling phase in event handling. Then the bubbling phase occurs. IE8 and earlier versions do not support DOM event streams, and browsers trigger events on event objects during the capture phase, with the result that there are two opportunities to manipulate events above the target object.

V. Event handlers

An event is an action performed by a user or browser itself; an event handler (or event listener) is a function that responds to an event. The name of the event handler begins with "On", such as onload, OnClick, and so on.

Vi. HTML Event handlers

To execute some JS code when the button is clicked, you can write this:

<div onclick= "alert (' clicked ')" >Click</div>

Note: You cannot use an escaped HTML syntax character in it.

You can also invoke scripts that are defined elsewhere in the page:

<script>
 function ShowMessage () {
  document.write ("FDAs");
 }
</script>
<input type= "button" value= "click Me" onclick= "showmessage ()"/>

The code in the event handler has permission to access any code in the global scope at execution time.

This uses a function that creates a encapsulated element property value. This function has a local variable event, which is the event object:

<input type= "button" value= "click Me" onclick= "alert (event.type)"/>

Where the This value equals the target element of the event, such as:

<input type= "button" value= "click Me" onclick= "alert (this.value)"/>

There are many problems with HTML event handlers, so you should use the event handlers specified by JS

Vii. DOM0 Level Event handlers

To specify an event handler using JS, you must first obtain a reference to the object you want to manipulate.

Each element has its own event handler properties, which are usually all lowercase, such as onclick. Such as:

<input type= "button" value= "click Me" id= "btn"/>
<script>
document.queryselector ("#btn"). onclick = function () {
 console.log ("Hello");
}
</script>

An event handler specified using the DOM0 method is considered a method of an element. Therefore, the event handler at this time is run in the scope of the element, that is, this refers to the current element:

<input type= "button" value= "click Me" id= "btn"/>
<script>
document.queryselector ("#btn"). onclick = function () {
 console.log (this.type);
}
</script>

Event handlers added in this manner are handled during the bubbling phase of the event stream.

To delete an event handler specified through the DOM0 level method:

Btn.onclick = null;

Viii. DOM2 Level Event handlers

AddEventListener ()

The method receives three parameters: the event name to process, the event handler function, and the boolean value; if True, the event handler is invoked during the capture phase, or false, which indicates that the event handler is invoked during the bubbling phase. Such as:

var btn = document.getElementById ("btn");
Btn.addeventlistener ("click", Function () {
 console.log (this.id);
})

You can also add multiple event handlers for the button, such as:

var btn = document.getElementById ("btn");
Btn.addeventlistener ("click", Function () {
  console.log (this.id);
})
Btn.addeventlistener ("click", Function () {
  console.log (this.value);
})

RemoveEventListener ()

var btn = document.getElementById ("btn");
function info () {
  console.log (this.value);
}
Btn.addeventlistener ("click", info);
Btn.addeventlistener ("click", Function () {
  console.log (this.id);
});
Btn.addeventlistener ("click", Function Valueandid () {
  Console.log (this.value + "" + this.id);
});
Btn.removeeventlistener ("click", info); Valid
btn.removeeventlistener ("click", Function () {
  console.log (this.id);
});//Invalid
Btn.removeeventlistener ("click", Valueandid); Invalid error

In most cases, you add event handlers to the bubbling phase of the event stream, which maximizes compatibility with a variety of browsers.

This is all about JavaScript event flow and event handler, I hope to help you learn.