Learn JavaScript event streams and event handlers_javascript tips-JS Tutorial-php.cn

Learn JavaScript event streams and event handlers_javascript tips

WBOY

Release： 2016-05-16 15:18:22

Original

1079 people have browsed it

This article introduces the JavaScript event flow and event handler in its entirety and shares it with you for your reference. The specific content is as follows

1. Event flow

Event flow describes the sequence of events received from the page. IE's event flow is an event bubbling flow, while Netscape Communicator's event flow is an event capture flow.

2. Event bubbling

That is, the event is initially received by the most specific element, and then propagates upward to less specific nodes. Such as:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
</head>
<body>
 <div>Click</div>
</body>
</html>

Copy after login

When the div element in the page is clicked, the click event will be propagated in the following order:

div element
body element
html element
document object

3. Event capture

The idea of event capture is that the most specific node should receive the event last. The purpose of event capture is to capture the event before it reaches the target.

When the div element in the page is clicked, the click event will be propagated in the following order:

document object
html tag
body tag
div tag

Although the specification requires that events should be propagated from the document object, browsers generally start capturing events from the window object. Because older versions of browsers do not support it, event bubbling is generally used.

4. DOM event flow

The event flow specified by "DOM2-level events" includes three stages: event capture stage, target stage and event bubbling stage .

In the DOM event stream, the actual target does not receive events during the capture phase. That is to say, during the capture phase, the event stops after it goes from document to html and then to body. The next phase is the "on target" phase, where the event occurs within the div and is considered part of the bubbling phase in event handling. Then, the bubbling phase occurs. IE8 and earlier versions do not support DOM event streaming. The browser triggers events on the event object during the capture phase. The result is that there are two opportunities to operate events on the target object.

5. Event handler

An event is a certain action performed by the user or the browser itself; an event handler (or event listener) is a function that responds to an event. The name of the event handler starts with "on", such as onload, onclick, etc.

6. HTML event handler

To execute some js code when the button is clicked, you can write it like this:

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

Copy after login

Note: Unescaped HTML syntax characters cannot be used inside.

You can also call scripts defined elsewhere in the page:

<script>
 function showMessage () {
  document.write("fdas");
 }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

Copy after login

The code in the event handler has access to any code in the global scope when executed.

Using this will create a function that encapsulates the element attribute value. This function has a local variable event, which is the event object:

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

Copy after login

Where, the value of this is equal to the target element of the event, such as:

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

Copy after login

There are many problems with HTML event handlers, so event handlers specified by js should be used

7. DOM level 0 event handler

To use js to specify an event handler, you must first obtain a reference to the object to be operated on.

Each element has its own event handler attributes, 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>

Copy after login

Event handlers specified using DOM level 0 methods are considered methods of the element. Therefore, the event handler at this time runs 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>

Copy after login

Event handlers added in this way will be processed during the bubbling phase of the event flow.

Remove event handlers specified via DOM level 0 methods:

btn.onclick = null;

Copy after login

8. DOM2 level event handler

addEventListener()

This method receives three parameters: the event name to be processed, the event handler function and a Boolean value; if the Boolean value is true, it means calling the event handler in the capture stage; if it is false, it means calling the event in the bubbling stage handler. Such as:

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
 console.log(this.id);
})

Copy after login

You can also add multiple event handlers to 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);
})

Copy after login

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); //有效
btn.removeEventListener("click", function () {
  console.log(this.id);
}); //无效
btn.removeEventListener("click", valueAndId); //报错无效

Copy after login

大多數情況下，都是將事件處理程序新增至事件流的冒泡階段，這樣就可以最大限度地相容於各種瀏覽器。

以上就是關於JavaScript事件流和事件處理程序的全部內容，希望對大家的學習有所幫助。