JS Event Monitoring Example detailed

Definition of Event Listener

In JavaScript, browsers generally fall into two main categories:

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

② based web browser (version number is greater than 9 IE browser, Firefox, Google and other browsers)

1) Basic syntax: Based on IE Kernel browser

Dom object. attachevent (type,callback,capture): Binding an event listener for an element

Parameter description:

Type: The event type of the binding, such as OnClick, onmouseover, onmouseout

Callback: Event handler, usually an anonymous function

Capture: Using the browser model, the bubbling model and the capture model, the default IE8 browser only supports the bubbling model!

?

1 2 3 4 5 6 7 8 9 10 11

Encapsulates the $ function, which is used to get the ID of the element function $ (ID) { return document.getElementById (ID) }//bound Event listener $ (' btn '). Attachevent (' OnClick ', function () { alert (' Hello ')}),//two times bound $ (' btn '). attachevent (' onclick ', function () { alert (' World ')} );

2.

Basic syntax: Event monitoring based on the core of the kernel

Dom object. AddEventListener (type,callback): Binding event listener for Web Core browser

Parameter description:

Type: Binding event types, without ' on ' prefixes, such as click,mouseover,mouseout

Callback: Event handler, usually an anonymous function

1 2 3 4 5 6 7 8 9 10 11

Encapsulates the $ function, which is used to get the ID of the element function $ (ID) { return document.getElementById (ID) }//bound Event listener $ (' btn '). AddEventListener (' OnClick ', function () { alert (' Hello ')}),//two times bound $ (' btn '). AddEventListener (' onclick ', function () { alert (' World ')});

Summarize the differences in event monitoring

IE kernel monitoring mode and the core monitoring mode:

① in different ways

IE Kernel's browser uses attachevent to bind

Web browser using AddEventListener to bind the kernel

② parameters are different

IE Kernel browser, its binding method a total of three parameters Type,callback,capture (using the browser model)

Web Core Browser, its binding method has a total of two parameters, type and callback

③type parameters are different

IE kernel browser, type is required to add ' on ' prefix, such as onclick

Web core browser, type is not required to add the ' on ' prefix, such as click

④ trigger sequence is different

IE Kernel Browser, its event listener is first bound after the trigger, after the binding of the first trigger

Web browser of the kernel, its event monitoring is first bound first triggered, after the binding after the trigger