Javascript中的事件

//事件概述：（详见高三第十三章P350）
//“DOM2级事件”定义了两个方法：addEventListener()和removeEventListener()用于指定和删除事件处理程序的操作；
//（支持DOM2级事件处理程序的浏览器有IE9、FireFox、Safari、Chrome、Opera）
//IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()
//（支持IE事件处理程序的浏览器有IE、Opera）
window.onload = function () {
    //---------给按钮绑定事件 Begin---------------
    var version = window.navigator.userAgent.toString();
    var btn = document.getElementById("btnOK");

    var handler1 = function () {
        alert("按钮被点击1！");
    }
    var handler2 = function () {
        alert("按钮被点击2！");
    }
    var handler3 = function () {
        alert("按钮被点击3！");
    }
    var handler4 = function () {
        alert("按钮被点击4！");
    }

    var btnattach = document.getElementById("btnAttach");
    //使用DOM0级方法指定HTML元素事件处理程序
    //这是传统的方式，好处是：一简单，二具有跨浏览器的优势
    btnattach.onclick = function () {
        if (version.search("MSIE") > -1) {
            alert("您使用的是IE浏览器！");
            //使用IE事件处理程序
            btn.attachEvent("onclick", handler3);
            btn.attachEvent("onclick", handler4);
        }
        else if (version.search("Chrome") > -1) {
            alert("您使用的是谷歌浏览器！");
            //使用DOM2级事件处理程序
            btn.addEventListener("click", handler1, false);
            btn.addEventListener("click", handler2, false);
        }
        else if (version.search("Firefox") > -1) {
            alert("您使用的是火狐浏览器！");
            //使用DOM2级事件处理程序
            btn.addEventListener("click", handler1, false);
            btn.addEventListener("click", handler2, false);
        }
        else {
            alert(version);
            //使用DOM2级事件处理程序
            btn.addEventListener("click", handler1, false);
            btn.addEventListener("click", handler2, false);
        }
    }
    //---------给按钮绑定事件 End---------------

    //---------给按钮解除事件 Begin---------------
    var btncancel = document.getElementById("btnCancel");
    btncancel.onclick = function () {
        if (version.search("MSIE") > -1) {
            //使用IE事件处理程序
            btn.detachEvent("onclick", handler3);
            btn.detachEvent("onclick", handler4);
        }
        else if (version.search("Chrome") > -1) {
            //使用DOM2级事件处理程序
            btn.removeEventListener("click", handler1, false);
            btn.removeEventListener("click", handler2, false);
        }
        else if (version.search("Firefox") > -1) {
            //使用DOM2级事件处理程序
            btn.removeEventListener("click", handler1, false);
            btn.removeEventListener("click", handler2, false);
        }
        else {
            //使用DOM2级事件处理程序
            btn.removeEventListener("click", handler1, false);
            btn.removeEventListener("click", handler2, false);
        }
    }
    //---------给按钮解除事件 End---------------
}

-------------------- 封装事件处理程序 EventUtil.js --------------------------
/**********事件处理程序**********
*EventUtil.js
*浏览器兼容，《高三》13章 P354
*2014-12-8
********************************/
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        else {
            element["on" + type] = handler;
        }
    },
    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;
        }
    },

    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },

    /********由于IE不支持事件捕获，因此这个方法只适用于事件冒泡阶段*********/
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
    },

    /*****按键时触发，返回按键所代表字符的ASCII码******/
    getCharCode: function (event) {
        if (typeof event.charCode == "number") {
            return event.charCode;
        }
        else {
            return event.keyCode; //IE8之前、Opera
        }
    }
}