Detailed explanation of js event monitoring examples

Definition of event monitoring

In Javascript, browsers are generally divided into two categories:

① Browsers based on IE kernel (IE browser with version number less than 9 browser)

② Browser based on W3C kernel (IE browser, Firefox, Google and other browsers with version number greater than 9)

1) Basic syntax: Browser based on IE kernel

dom object.attachEvent(type, callback, capture): Bind an event listener to the element

Parameter description:

type: The bound event type, such as onclick, onmouseover , onmouseout

callback: event handler, usually an anonymous function

capture: the browser model used, bubbling model and capture model. By default, browsers below IE8 only support bubbling. Bubble model!

?

//封装$函数，用于获取id的元素 function $(id){ return document.getElementById(id) } //绑定事件监听 $('btn').attachEvent('onclick',function(){ alert('hello') }); //二次绑定 $('btn').attachEvent('onclick',function(){ alert('world') });

Basic syntax: event monitoring based on W3C kernel

Summary of the differences in event monitoring

The listening method of the IE kernel and the listening method of the W3C kernel:

①The method is different

The IE kernel’s listening method The browser uses attachEvent for binding

W3C core browser uses addEventListener for binding

②The parameters are different

IE core browser has three binding methods. Parameters type, callback, capture (browser model used)

W3C kernel browser, its binding method has two parameters in total, type and callback

③type parameters are different

For IE core browsers, type does not need to be prefixed with 'on', such as onclick

W3C core browsers, type does not need to be prefixed with 'on', such as click

④The triggering order is different

In browsers with IE core, the event monitoring is first bound and then triggered, and in the latter binding, it is triggered first.

In browsers with W3C kernel, the event monitoring is first Binding triggers first, binding triggers later

Related recommendations:

Detailed explanation of event monitoring and event publishing usage examples in Node.js

Detailed introduction to JS key combination event listening plug-in

Detailed explanation of jQuery-mobile event monitoring and usage

//封装$函数，用于获取id的元素 function $(id){ return document.getElementById(id) } //绑定事件监听 $('btn').addEventListener('onclick',function(){ alert('hello') }); //二次绑定 $('btn').addEventListener('onclick',function(){ alert('world') });

The above is the detailed content of Detailed explanation of js event monitoring examples. For more information, please follow other related articles on the PHP Chinese website!