This article summarizes the way that JavaScript implements adding and deleting events. Share to everyone for your reference. Specifically as follows:
JavaScript to add, delete events, that is, let some methods take effect to specify the number of times, can be once, two or more times, but the specified number of times after the execution of the deletion of the method to invalidate it, if you are often engaged in JS programming, you will know that this function is used more.
Let's take a look at a relatively simple example:
function $ (ID) {return document.getelementbyidx_x (ID);} var ev = NULL;
var count1 = 0;
var count2 = 0;
var oncount1 = 0;
var oncount2 = 0;
var isSetEv1 = false;
var isSetEv2 = false;
Create the common function of the event var eventutil = function () {};
var flag = new Flag (); Monitor variable value function Flag () {var tempflag = false; var method = null;
Setmethod = function (value) {method = value;} This.
SetValue = function (value) {tempflag = value; if (Tempflag = = True && method) {Eval_r (method)}}
GetValue = function () {return tempflag;}} Eventutil.addeventhandler = function (Obj,eventtype,handler) {//If it is FF if (obj.addeventlistener) {Obj.addeventlistener
(Eventtype,handler,false);
//If it is IE else if (obj.attachevent) {obj.attachevent (' on ' +eventtype,handler);}
else {obj[' on ' +eventtype] = Handler}} The parameter values that are passed in by the cancellation event must be identical to the binding timing to Eventutil.removeeventhandler = function (Obj,eventtype,handler) {//If it is FF if (
Obj.removeeventlistener) {Obj.removeeventlistener (eventtype,handler,false);//If it is IE else if (obj.detachevent) {obj.detachevent (' on ' +eventtype,handler);}
else {obj[' on ' +eventtype] = Handler}} function SetEvent1 (e) {ev = e;//for Firefox gets event-related attribute flag.
Setmethod (' AddList1 () '); Flag.
SetValue (TRUE); The function SetEvent2 (e) {ev = e;//for Firefox gets event-related property flag.
Setmethod (' AddList2 () '); Flag.
SetValue (TRUE); function IsSetEvent1 (state) {IsSetEv1 = state;//ie The method name cannot be the same as the global variable name} function IsSetEvent2 (state) {isSetEv2 = state;} Fu Nction add1 (obj) {oncount1 = oncount1 + 1; if (isSetEv1) {obj.innerhtml = "Set the event, added <b>" + oncount1 + "</b> ; Article, the left list 1 automatically increased!
";
} else {obj.innerhtml = "No event was set, added <b> + oncount1 + </b> article, left List 1 no change!"
";
}
} The function add2 (obj) {oncount2 = Oncount2 + 1; if (isSetEv2) {obj.innerhtml = "Set the event, added <b>" + Oncount2 + "</b& Gt Article, the left List 2 automatically increased!
";
} else {obj.innerhtml = "No event was set, added <b> + oncount2 + </b> article, left List 2 no change!"
";
}
} function AddList1 () {count1 = count1 + 1; $ ("List1"). InnerHTML = "DynamicAdded <b> "+ count1 +" </b> article! ";
function AddList2 () {count2 = Count2 + 1; $ ("List2"). InnerHTML = "Dynamically added <b>" + count2 + </b> article! ";}
Let's take a look at a simplified example:
Common methods for adding and deleting events (compatible with IE and Firefox)
function addEventHandler (Otarget, Seventtype, Fnhandler) {
if ( Otarget.addeventlistener) {//Non IE
otarget.addeventlistener (Seventtype, Fnhandler, false);
else if (otarget.attachevent) {//ie
otarget.attachevent (' on ' + Seventtype, fnhandler);
} else {
otarget[' on ' + seventtype] = Fnhandler
}}
function removeEventHandler (Otarget, Seventtype, Fnhandler) {
if (Otarget.removeeventlistener) {//Non IE
Otarget.removeeventlistener (Seventtype, Fnhandler, false);
else if (otarget.detachevent) {//ie
otarget.detachevent (' on ' + Seventtype, fnhandler);
} else {
otarget[' on ' + seventtype] = null;
}
}
Finally, let's look at a complete example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The
wants this article to help you with your JavaScript programming.