JS: Event handlers

There is a toggle event in jquery that can be bound to two or more functions, which can be rotated by the Click event, which can be achieved by learning two methods (or four) of the original JavaScript in two days.

#box {        margin: 50px;         width: 200px;         height: 200px;        } . Blue {        background: blue;    } . Red {        background: red;    }

Event handling under 1.W3C:

AddEventListener (): Used to handle the specified operation;

RemoveEventListener (): Used to delete event programs

Here both methods accept 3 Parameters OH: The event name to process (click ... ), an event handler, a Boolean value (Ture: Represents the capture phase of the call event handler, False indicates: bubbling phase call).

Window.addeventlistener ("Load", function () {
var box = document.getElementById ("box");
Box.addeventlistener ("click", Tored,false);
Box.addeventlistener ("click", Function () {//will not be deleted by mistake, executed every time
this.innerhtml = "CCCCCCCCC";
},false)

},false);

function tored () {
This.classname = "Red";
　　　 alert (this.tagname); This is the event target (DIV)
This.addeventlistener ("click", Toblue,false);
This.removeeventlistener ("click", Tored,false);

}

function Toblue () {
This.classname = "Blue";
this.innerhtml = "nnnnnnn";
This.addeventlistener ("click", Tored,false);
This.removeeventlistener ("click", Toblue,false);

}

PS: Event handlers added through AddEventListener () can only be removed by using RemoveEventListener (), and removing the parameters that are passed in is the same as the parameters that are used when the handler is added. This also means that anonymous functions added through AddEventListener () cannot be removed.

2. However, these two methods are not supported by browsers below IE9, which provides two additional methods for this IE: attachevent () and DetachEvent ()

var btn = document.getElementById ("box");

Btn.attachevent ("onclick", function () {

　　Alert (This = = = window); True, this is the Window object

alert (123);

});

Btn.attachevent ("onclick", function () {

alert (456);

});

This calls two times attachevent () and adds two different event handlers for the same press. But unlike DOM methods, these event handlers are not executed in the order in which they were added, but are triggered in reverse order. Play "456" first, then "123".

Ps:attachevent () and DetachEvent () can also add events more than once, and an anonymous function added through attachevent cannot be removed, and the parameter handles the event name with "on" and no Boolean value.

3. Cross-browser event handlers

　　

functionAddevent (obj, type, fn) {//To add an event handler 　　　　 if(Obj.addeventlistener) {Obj.addeventlistener (type, FN,false); }Else if(obj.attachevent) {obj.attachevent ("On" +type, fn); }}functionRemoveevent (obj, type, fn) {//Remove Event Compatibility 　　　　　　 if(Obj.removeeventlistener) {Obj.removeeventlistener (type, FN,false); }Else if(obj.detachevent) {obj.detachevent ("On" +type, fn);　　　　}; }functionGettarget (evt) {//get target objects across browsers 　　　　　　 if(Evt.target) {// the 　　　　　　　　 returnEvt.target; }Else if(window.event.srcElement) {returnwindow.event.srcElement; }} addevent (window,"Load",function() {varBTN = document.getElementById ("box"); Addevent (BTN,"Click", tored);　　　　}); functiontored (evt) {varthat =Gettarget (EVT); That.classname= "Red"; Addevent (That,"Click", Toblue); Removeevent (That,"Click", tored); }functionToblue (evt) {varthat =Gettarget (EVT); That.classname= "Blue"; Addevent (That,"Click", tored); Removeevent (That,"Click", Toblue); }

　　

JS: Event handlers