JavaScript event handlers

I. Native JavaScript event handlers

<! DOCTYPE html>
    DOM Level 0 Specifies the event handler, which is considered an element of the method (run in the scope of the element, i.e. this refers to the current element)    document.getelementsbyname ("Echo Username") [0].onclick = function () {        alert (this.value);    }    Document.getelementsbyname ("Echo Username") [0].onclick = null;//Delete bound event    //dom Level 2 event handler, can be implemented to add multiple click events Now, The third parameter is true: The capture stage invokes the event handler, false: The bubbling phase invokes the event handler    var Btn = document.getElementById ("mybtn");    Btn.addeventlistener ("click", Function () {        alert (this.id);    },false);    Btn.addeventlistener ("click", Function () {        alert ("My ID is btn!");    },false);    Delete a binding event to use RemoveEventListener and pass in the event handler reference to remove, so this will cause the anonymous function to not be removed!    //removeeventlistener ("click", Handler,false);
Two. Compatibility issues
    Compatibility issues: IE is implemented in the following ways: Attachevent and Detachevent,attachevent ("onclick", Handler)/detachevent ("onclick", Handler)    // Moreover, IE is more insane, the event handler function runs in the global scope, that is, this = = Window    var Btn = document.getElementById ("mybtn");    Btn.attachevent ("onclick", function () {        $this = Btn;        Alert ($this. ID);//mybtn        alert (this.id);//undefined    });
Three. Encapsulating objects to resolve this compatibility issue
var evenutil = {    addhandler:function (element,eventype,handler) {        if (element.addeventlistener) {            Element.addeventlistener (Eventype,handler,false);        } else if (element.attachevent) {            element.attachevent ("on" +eventype,handler);        } else{            element["on" +eventype]=handler;        }    ,    removehandler:function (Element,eventype,handler) {        if (element.removeeventlistener) {            element.removeeventlistener (eventype,handler,false);        } else if (element.detachevent) {            element.detachevent ("on" +eventype,handler);        } else{            element["on" +eventype]=null;}}    
Four. Event Object
Properties/methods for commonly used event objects:
The currenttarget of the event object, the target property var Btn = document.getElementById ("mybtn");        Evenutil.addhandler (Document.body, "click", Function (event) {Console.log (this = = Document.body); Console.log (Event.currenttarget = = this);//currenttarget refers to the element in which the program is currently handling events. Must be equivalent to this console.log ("Target is Btn?").    + (Event.target = = Btn));//target refers to the element you clicked on. When you click Btn, the attribute is Btn}); Event object's Type property var handler = function (event) {switch (event.type) {case "click": Alert                ("click");            Break                Case "MouseOver": Event.target.style.backgroundColor = "Red";            Break                Case "Mouseout": Event.target.style.backgroundColor = "";        Break    }    };    Evenutil.addhandler (Btn, "click", Handler);    Evenutil.addhandler (Btn, "mouseover", Handler); Evenutil.addhandler (Btn, "mouseout", Handler);};
    Stoppropagation method for event object: Block bubbling    var Bubbledemo = (function (element) {        Document.body.onclick = function () {            Alert ("Body click!");        }        Element.onclick = function () {            alert (element.id+ "click!");        }        return {            stopclickbubble:function () {                Evenutil.addhandler (element, "click", Function (event) {                    alert (" Is can use Stopprogatation? "+event.bubbles)                    if (event.bubbles) {                        event.stoppropagation ();}}                );            }        };}    ) (document.getElementById ("mybtn"));    Block Mybtn's onclick event bubbling    bubbledemo.stopclickbubble ();
    Preventdefault method for Event object: Block default element default behavior    var baidulink = document.getelementsbyname ("Baidulink") [0];    var Defaultdemo = (function (element) {        Element.onclick = function () {            alert ("Hello Baidu?");        }        return{            stopdefaultaction:function () {                Evenutil.addhandler (element, "click", Function (event) {                    if ( event.cancelable) {                        event.preventdefault ();})}    ) (Baidulink);        Block default behavior: Do not let Baidu search the first page of the Jump    defaultdemo.stopdefaultaction ();
JavaScript event handlers