JS Event Listener Usage Example detailed

This article describes the JS event listener usage. Share to everyone for your reference. The specific analysis is as follows:

1. When the same object uses a. OnClick method to trigger multiple methods, the latter overrides the previous method, that is, when the object's OnClick event occurs, only the last bound method is executed. With event monitoring there will be no overlay, and each bound event will be executed. As follows:

?

1 2 3 4 5 6 7 8 9 10 11-12

Window.onload = function () {var btn = document.getElementById ("yuanevent"); Btn.onclick = function () {alert ("first event");} BT N.onclick = function () {alert (second event);} Btn.onclick = function () {alert ("third event");}

The last one is output only: The third event, because the latter method overrides the previous method.

The original ecological event binding function AddEventListener:

?

1 2 3 4 5 6 7 8 9 10 11-12

var eventone = function () {Alert (First listener event);} function Eventtwo () {Alert (second listener event);} window.onload = function () {var BT n = document.getElementById ("yuanevent"); AddEventListener: Binding function Btn.addeventlistener ("click", Eventone); Btn.addeventlistener ("click", Eventtwo); }

Output: First listener event and second listener event

2, the use of event monitoring to the object binding method, you can remove the corresponding binding, written as follows:

?

1 2 3 4 5 6 7 8 9 10 11-12

var eventone = function () {Alert (First listener event);} function Eventtwo () {Alert (second listener event);} window.onload = function () {var BT n = document.getElementById ("yuanevent"); Btn.addeventlistener ("click", Eventone); Btn.addeventlistener ("click", Eventtwo); Btn.removeeventlistener ("click", Eventone); }

Output: Second listener event

3, unbind the event must use the handle of the function, the entire function can not be unbound write.

Wrong wording:

?

1 2 3 4 5 6

Btn.addeventlistener ("click", Function () {alert (11);}); Btn.removeeventlistener ("click", Function () {alert (11);});

Correct wording:

?

1 2	Btn.addeventlistener ("click", Eventtwo); Btn.removeeventlistener ("click", Eventone);

Summary: After the function of the encapsulation of the following events, compatible with the major mainstream browsers.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

* * * AddEventListener: Event listening for DOM elements * Target: Listener Object * Type: Listener function type, such as Click,mouseover * Func: Listener function/function addEventHandler ( Target,type,func) {if (Target.addeventlistener) {//monitor IE9, Google and Firefox target.addeventlistener (type, func, false); else if (target.attachevent) {target.attachevent ("on" + Type, func);} else{target["on" + type] = func}} * * removeEventHandler: Event that removes a DOM element * Target: Listener Object * Type: Listener function type, such as Click,mouseover * Func: Listener function */function Removeeventhandl ER (target, type, func) {if (Target.removeeventlistener) {//monitor IE9, Google and Firefox target.removeeventlistener (type, func, false);} else if (target.detachevent) {target.detachevent ("on" + Type, func);} else {delete target[' on ' + type];} var eventone = function () {alert ("First listener Event");} FUnction Eventtwo () {Alert (second listener event);} window.onload = function () {var bindeventbtn = document.getElementById (" Bindevent "); Monitor Eventone event addEventHandler (bindeventbtn, "click", Eventone); Monitor Eventtwo event addEventHandler (bindeventbtn, "click", Eventtwo); Monitor its own event addEventHandler (BINDEVENTBTN, "click", Function () {alert ("Third listening event");}); Cancels the first listener event removeEventHandler (BINDEVENTBTN, "click", Eventone); Cancel the second listener event removeEventHandler (BINDEVENTBTN, "click", Eventtwo); }

Instance:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 This is the

<! DOCTYPE html>

The

wants this article to help you with your JavaScript programming.