Summary of how to add and delete events using JavaScript, and summary of javascript

Summary of how to add and delete events using JavaScript, and summary of javascript

This example summarizes how to add and delete events in JavaScript. Share it with you for your reference. The details are as follows:

The method used to add or delete events in JavaScript, that is, to make certain methods take effect for a specified number of times, which can be one, two, or more times. However, after a specified number of executions, the method is deleted, make it ineffective. If you are often engaged in JS programming, you will know that this function is used a lot.

Let's take a look at a 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; // common function for event creation var EventUtil = function () {}; var flag = new Flag (); // monitoring variable value function Flag () {var tempflag = false; var method = null; this. setMethod = function (value) {method = value;} this. setValue = function (value) {tempflag = value; I F (tempflag = true & method) {eval_r (method)} this. getValue = function () {return tempflag;} EventUtil. addEventHandler = function (obj, EventType, Handler) {// if it is FFif (obj. addEventListener) {obj. addEventListener (EventType, Handler, false);} // if it is IEelse if (obj. attachEvent) {obj. attachEvent ('on' + EventType, Handler);} else {obj ['on' + EventType] = Handler ;}} // cancel the event. The input parameter value must be exactly the same as the value when binding the event to EventUtil. removeEventHandler = Function (obj, EventType, Handler) {// if it is FFif (obj. removeEventListener) {obj. removeEventListener (EventType, Handler, false);} // if it is IEelse if (obj. detachEvent) {obj. detachEvent ('on' + EventType, Handler);} else {obj ['on' + EventType] = Handler ;}} function setEvent1 (e) {ev = e; // obtain event-related attributes for Firefox. setMethod ('addlist1 () '); flag. setValue (true);} function setEvent2 (e) {ev = e; // obtain the event-related attribute flag for Firefox. setMethod ('addlis T2 () '); flag. setValue (true);} function isSetEvent1 (state) {isSetEv1 = state; // The method name in ie cannot be the same as the global variable name} function isSetEvent2 (state) {isSetEv2 = state ;} function add1 (obj) {oncount1 = oncount1 + 1; if (isSetEv1) {obj. innerHTML = "events are set, <B>" + oncount1 + "</B> is added, and list 1 on the left is automatically added! ";} Else {obj. innerHTML =" no event is set. An article <B> "+ oncount1 +" </B> is added. The list on the left is unchanged! ";}} Function add2 (obj) {oncount2 = oncount2 + 1; if (isSetEv2) {obj. innerHTML = "set events, added <B>" + oncount2 + "</B> articles, and added automatically in List 2 on the left! ";} Else {obj. innerHTML =" no event is set. An article <B> "+ oncount2 +" </B> is added. The list on the left is not changed! ";}} Function addList1 () {count1 = count1 + 1; $ (" list1 "). innerHTML = "added <B>" + count1 + "</B>! ";} Function addList2 () {count2 = count2 + 1; $ (" list2 "). innerHTML = "added <B>" + count2 + "</B>! ";}

Let's take a look at a simplified example:

// General method 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 instance:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
I hope this article will help you design javascript programs.