事件处理程序

最新推荐文章于 2025-12-20 12:23:55 发布

转载最新推荐文章于 2025-12-20 12:23:55 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hbkbac100h1j&title=%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E7%A8%8B%E5%BA%8F

文章标签：

#javascript

前端专栏收录该内容

241 篇文章

订阅专栏

<!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>