事件处理程序

2018-06-24 00:12:29来源：未知阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM0级DOM2级</title>
</head>
<body>
<input id="btn1" type="button" value="click1" onclick="show()">
<input id="btn2" type="button" value="click2">
<input id="btn3" type="button" value="click3">
<script>
    function show() {
        alert("btn1");
    }
    //DOM0级
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function () {
        alert("DOM0级btn2");
    };
    //DOM2级
    function show2() {
        alert("DOM2级btn3");
    }
    var btn3 = document.getElementById("btn3");
//    btn3.addEventListener("click",show2,false);
//    btn3.removeEventListener("click",show2,false);
    //ie事件处理程序
//    btn3.attachEvent("onclick",show2);
//    btn3.detachEvent("onclick",show2);
    //跨浏览器事件处理程序
    //能力检测
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;
            }
        }
};
eventUtil.addHandler(btn3,"click",show2);
eventUtil.removeHandler(btn3,"click",show2);
</script>
</body>
</html>