Event Monitoring AddEventListener () and RemoveEventListener ()---------1

Always want to write a native event monitoring records, convenient to see later, do not want to write the main event is listening to the word is too long, remember it is difficult to remember every time to check, this time to know the finished, come here to check, and later if the understanding of the more thorough, and then complement the whole good

First, DOM0-level events and DOM2-level events

There are three ways to add an event to an element

Html

<input type= "button" value= ' button1 ' id= ' btn1 '/>
<input type= "button" value= ' button2 ' id= ' btn2 '/>
<input type= "button" value= ' Button3 ' id= ' btn3 ' onclick= ' alert (' I am btn3 ') ' />

For btn3 buttons, the event is added directly to the element tag, as if it were an HTML event, and the disadvantage is that there is no separation.

DOM0 level Events

// Add Event var btn1=document.getelementbyid (' btn1 ');  Btn1.onclick=function() {    alert (' I am btn1 ')}// dismiss event btn1.onclick=null;

Fetch directly to BTN1, add Conclick event to him, disadvantage can only add one event, if add again, will overwrite first event

DOM2 level Events

var Btn2=document.getelementbyid (' btn2 ');   function box () {alert (' I am btn2 ');} Btn2.addeventlistener (' Click ', box,false); // Dismiss Event Btn2.removeeventlistener (' Click ', box,false);

Add events with AddEventListener (what events, what to do, false); False seems to be the event bubbling phase corresponding to the true event capture phase, generally I do not use the rookie of the true, have not tried, anyway write false

Delete event with RemoveEventListener (what event, what to do, false);

PS: Add event and delete event, must and add the same time to remove, otherwise can not be cleared off.

Seems to be very simple, really if this is good, this addeventlistener and removeeventlistener have compatibility problems, as if the IE8 below, so there are other words to remember

attachevent and Detacheven T, this seems to be IE exclusive,

Usage

var Btn2=document.getelementbyid (' btn2 ');   function box () {alert (' I am btn2 ');} btn2.attachevent (' onclick ', box); // Dismiss Event btn2.detachevent (' onclick ', box);

There is no third parameter because IE8 previously only supported event bubbling, it is also necessary to remember that this is the onclick, all events are added on, low-level browser things more

Well, remember these four words.

AddEventListener, RemoveEventListener, Attachevent, detachevent

------------------------------------------------------------------------------------ Split Line --------------- ---------------------------------------------------------------------------------------------------

To be compatible with all browsers, make judgments, who have the ability, who do things

varBtn2=document.getelementbyid (' btn2 ');functionBox () {alert (' I am btn2 '));}varEventutil={       //Add EventAddHandler:function(Element,type,handler) {////Three parameters for elements, events, what to Do (method)         if(Element.addeventlistener) {//if the Element.addeventlistener method is supported, use AddEventListenerElement.addeventlistener (Type,handler,false); }Else if(element.attachevent) {//if the Element.attachevent method is supported, use AttacheventElement.attachevent (' on ' +Type,handler); }Else{element[' On ' +type]=handler;//if it's not supported, use the DOM0-level approach         }    },    //Delete Event//Ibid.RemoveHandler:function(element,type,handler) {if(Element.removeeventlistener) {Element.removeeventlistener (Type,handler,false); }Else if(element.detachevent) {element.detachevent (' On ' +Type,handler); }Else{element[' On ' +type]=NULL; }}}eventutil.addhandler (BTN2,' Click ', box); Eventutil.removehandler (BTN2,' Click ', Box);

Encapsulates a method that can be brought directly to use in the future.

Event Monitoring AddEventListener () and RemoveEventListener ()---------1