In JavaScript, there are two ways to register events (bound events), the traditional way to register events and the event listener way to register events. Let’s explain them separately.

1. The traditional way

In JavaScript code, on-beginning events (such as onclick) are often used to add events and event handlers to the DOM element objects that you manipulate. The syntax is as follows.

Element object. Event = handler of the event;/ / sample
oBtn.onclick = function() {}Copy the code

In the above syntax, an element object is an element node obtained using methods such as getElementByld(). The feature of registering events in this way is that the registered events are unique, that is, only one handler can be set for an element and an event. The last handler registered will override the previous one.

2. Event listening mode

To add multiple event handlers to the same DOM object for the same event, the DOM 2 level event model introduces the concept of event flow, which allows DOM objects to bind events by means of event listeners. Because of the different implementation methods of event stream adopted by different browsers, the implementation of event listener has compatibility problems. According to the browser kernel, browsers can be divided into two categories, one is the early version of Internet Explorer (such as Internet Explorer 6 to Internet Explorer 8), one is the browser that complies with W3C standards (hereinafter referred to as standard browser).

Next, we will introduce the implementation of event listening for different types of browsers.

(1) Early IE kernel browser

In earlier versions of Internet Explorer, the syntax format for event listening was as follows.

DOM object. AttachEvent (type, callback);

In the syntax above, the parameter type refers to the event type bound to the DOM object, which consists of on and the event name, such as onclick. The callback argument represents the handler of the event.

(2) Standard browser

Standard browsers include Internet Explorer 8 or later, Firefox, and Chrome. The syntax is as follows.

AddEventListener (type, callback, [capture]);Copy the code

In the above syntax, the parameter type refers to the event type bound to the DOM object, which is set by the event name, as in click. The callback argument represents the handler of the event. The capture parameter defaults to false to indicate that event processing is completed during the bubble phase, and when set to true, to indicate that event processing is completed during the capture phase.

The two types of browsers described above implement event listening in different syntax and in different order in which event handlers are fired. Example code for an earlier version of Internet Explorer is shown below.

<div id="t">test</div>
<script>
var obj = document.getElementById('t');
// Add the first event handler
obj.attachEvent ('onclick'.function() {
console.log ('one');
});
// Add a second event handler
obj.attachEvent('onclick'.function() {
console.log('two');
});
</script>
Copy the code

Sample code for a standard browser is shown below.

<div id="t">test</div>
<script>
var obj = document.getElementById('t');
// Add the first event handler
obj.addEventListener('click'.function() {
console.log ('one');
});
// Add a second event handler
obj.addEventListener('click'.function() { 
console.log ('two');
});
</script>
Copy the code

These two methods are used to add two handlers for the click event of the < div> tag, with the first one printing one on the console and the second two on the console. Next, we saved the event listening code for earlier versions of IE in the test. HTML file, and tested it in IE 11 developer tools, in IE 8 compatibility mode.

Run result 128 For the same event on the same object, the event handlers of earlier Versions of Internet Explorer are executed in reverse order of addition, so the output results are two and one in sequence. In standard browsers, event handlers are executed in order of addition, so the output is one and two.

When an event occurs, it is propagated in a specific order between the element node where the event occurred and the DOM root node. The process of event propagation is called event flow.

In browser history, the Netscape team used event capture for their event stream, meaning that the event stream would propagate from the top of the DOM tree to the element node where the event occurred. Microsoft’s event stream uses event bubbling, which means that the event stream should propagate from the element node where the event occurred to the root node of the DOM tree.

W3C neutralizes the solution proposed by Netscape and Microsoft, which stipulates that after an event occurs, the event is captured first, but the event is not processed. It then proceeds to the target stage, executing the event handler for the current element object. But it can be seen as part of the bubbling phase; Finally, the bubbling of the event is realized and the event is processed step by step.

🌊🌈

A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology

Challenge the shortest time to walk into HTML (18) challenge the shortest time to walk into HTML (20)

Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (17) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (18) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (19) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (20)

🌊🌈 About postscript:

Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice

Original is not easy, “like” + “attention” thanks for your support ❤

Hi, I’m Ken