Home > Developer > JavaScript
Learn JavaScript event streams and event handlers, javascript events
This article introduces JavaScript event streams and Event Handlers for your reference. The specific content is as follows:
I. event stream
The event stream describes the sequence of events received from the page. The event stream of IE is the event bubble stream, while the event stream of Netscape Communicator is the event capture stream.
Ii. Event bubbling
That is, when an event starts, it is received by the most specific element and then spread to a node that is not specific. For example:
<!DOCTYPE html>When you click the div element in the page, the click event will be transmitted in the following order:
Iii. Event capture
The idea of event capturing is that the most specific node should finally receive the event. Event capture is intended to capture an event before it reaches the target.
When you click the div element in the page, the click event will be transmitted in the following order:
Although the rule requires that the event should be transmitted from the document object, the browser usually captures the event from the window object. Because the browser of earlier versions does not support this function, event bubbling is generally used.
Iv. DOM event stream
The "DOM2-level event" rule specifies that the event stream contains three phases:Event capture stage, in target stageAndEvent bubble stage.
In the DOM event stream, the actual target does not receive events in the capture phase. That is to say, in the capture phase, the event stops after the document to html and then to the body. The next stage is the "target" stage, so an event occurs in the div and is considered part of the bubble stage in event processing. Then, the bubble stage occurs. In IE8 and earlier versions, DOM Event streams are not supported. When the browser triggers events on the event object in the capture phase, there are two opportunities to operate events on the target object.
5. event handling program
An event is an action performed by a user or a browser. An event handler (or an event listener) is a function that responds to an event. The name of the event handler starts with "on", such as onload and onclick.
Vi. HTML event processing program
To execute some js Code when the button is clicked, you can write it as follows:
<div onclick="alert('Clicked')">Click</div>
Note: you cannot use unescaped HTML syntax characters.
You can also call scripts defined elsewhere on the page:
<script> function showMessage () { document.write("fdas"); }</script><input type="button" value="Click Me" onclick="showMessage()" />
When executing the code in the event handler, you have the right to access any code in the global scope.
This creates a function that encapsulates the element attribute values. This function has a local variable event, that is, the event object:
<input type="button" value="Click Me" onclick="alert(event.type)" />
The value of this is equal to the target element of the event, for example:
<input type="button" value="Click Me" onclick="alert(this.value)" />
The HTML event handler has many problems. Therefore, use the event handler specified by js.
VII. DOM0-level event handler
To use js to specify an event handler, you must first obtain a reference to the object to be operated.
Each element has its own event handler attributes, which are usually in lowercase, such as onclick. For example:
<input type="button" value="Click Me" id="btn" /><script>document.querySelector("#btn").onclick = function() { console.log("hello");}</script>
The event handler specified by the DOM0-level method is considered an element method. Therefore, the event handler at this time runs in the element scope; that is, this references the current element:
<input type="button" value="Click Me" id="btn" /><script>document.querySelector("#btn").onclick = function() { console.log(this.type);}</script>
The event handler added in this way will be processed in the bubbling phase of the event stream.
Delete the event handler specified by the DOM0-level method:
btn.onclick = null;
8. DOM2-level event handler
AddEventListener ()
This method receives three parameters: the name of the event to be processed, the event handler function, and the Boolean value. If the Boolean value is true, the event handler is called during the capture phase. If the Boolean value is false, indicates that the event handler is called in the bubble stage. For example:
var btn = document.getElementById("btn");btn.addEventListener("click", function () { console.log(this.id);})
You can also add multiple event handlers for this button, such:
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); // the error message is invalid.
In most cases, the event handler is added to the bubbling stage of the event stream, so that it can be compatible with various browsers to the maximum extent.
The above is all about the JavaScript event stream and event handler, and I hope it will be helpful for you to learn.
Articles you may be interested in:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
