How JavaScript implements adding and deleting events summary _javascript tips

Source: Internet
Author: User

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&gt ; 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.