JS Event Listener Usage Example detailed

This article mainly introduces the use of JS event listener, in the form of examples to analyze the JavaScript event listener usage precautions and related skills, the need for friends can refer to the following
This example describes the JS event listener usage. Share to everyone for your reference. The specific analysis is as follows:

1. When the same object uses the. onclick notation to trigger multiple methods, the latter method overwrites the previous method, which means that only the last bound method is executed when the object's OnClick event occurs. With event monitoring There is no overwrite, and each bound event is executed. As follows:

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

Last output only: The third event, because the latter method overwrites the previous method.

The original ecological event binding function AddEventListener:

var eventone = function () {
Alert ("First listener event");
}
function Eventtwo () {
Alert ("Second listener event");
}
Window.onload = function () {
var btn = 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, the following wording:

var eventone = function () {
Alert ("First listener event");
}
function Eventtwo () {
Alert ("Second listener event");
}
Window.onload = function () {
var btn = document.getElementById ("yuanevent");
Btn.addeventlistener ("click", Eventone);
Btn.addeventlistener ("click", Eventtwo);
Btn.removeeventlistener ("click", Eventone);
}

Output: Second listener event

3, unbind the event must be used with the function of the handle, the entire function is written on the cannot unbind.
Error wording:

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

Correct wording:

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

Summary: The function is encapsulated after the monitoring event as follows, compatible with the major mainstream browser.

/*
* AddEventListener: Listen for DOM element events
*
* Target: Listener object
* Type: listener function type, e.g. 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: Removing events from DOM elements
*
* Target: Listener object
* Type: listener function type, e.g. Click,mouseover
* Func: Listener function
*/

function removeEventHandler (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");
Monitoring Eventone Events
addEventHandler (BINDEVENTBTN, "click", Eventone);
Monitoring Eventtwo Events
addEventHandler (BINDEVENTBTN, "click", Eventtwo);
Listen to events of their own
addEventHandler (BINDEVENTBTN, "click", Function () {
Alert ("Third listener event");
});
Cancels the first listener event
removeEventHandler (BINDEVENTBTN, "click", Eventone);
Cancels the second listener event
removeEventHandler (BINDEVENTBTN, "click", Eventtwo);
}

Instance:

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>Event</title>
<script type= "Text/javascript" >
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;
}
}
function removeEventHandler (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");
Monitoring Eventone Events
addEventHandler (BINDEVENTBTN, "click", Eventone);
Monitoring Eventtwo Events
addEventHandler (BINDEVENTBTN, "click", Eventtwo);
Listen to events of their own
addEventHandler (BINDEVENTBTN, "click", Function () {
Alert ("Third listener event");
});
Cancels the first listener event
removeEventHandler (BINDEVENTBTN, "click", Eventone);
Cancels the second listener event
removeEventHandler (BINDEVENTBTN, "click", Eventtwo);
}
</script>
<body>
<input type= "button" value= "Test" id= "Bindevent" >
<input type= "button" value= "Test 2" id= "Yuanevent" >
</body>

Transferred from: http://www.jb51.net/article/67051.htm

JS Event Listener Usage Example detailed