js事件绑定的3种方式,以及兼容IE的写法

事件绑定分为3种
1.直接在html中绑定
2.DOM0级事件绑定
3.DOM2级事件绑定

html

<body>
    <button onclick="get()">按钮</button>
    <button id="btn">DOM0级事件</button>
    <button id="btn2">DOM2级事件绑定</button>
</body>

js

//绑定事件满足3步:
//1.事件对象   button
//2.绑定一个事件类型
//3.事件句柄 (事件处理函数)

//添加事件
function get(){
    console.log(1)
}
var btn=document.getElementById("btn")
var btn2=document.getElementById("btn2")
var dom0=function(){
    console.log("DOM0级事件")
}
var dom2=function(){
    console.log("DOM2级事件")
}
btn.onclick=dom0
btn2.addEventListener("click",dom2,false)
//兼容IE8
btn2.attachEvent("onclick",dom2)
//移除事件
btn2.removeEventListener("click",dom2)
//移除事件IE8
btn2.detachEvent("onlick",dom2)

兼容IE写法

var key={
    addEvent:function(element,type,fun){
        if(element.addEventListener){
            element.addEventListener(type,fun)
        }else if(element.attachEvent){
            element.attachEvent("on"+type,fun)
        }else{
            element["on"+type]=null
        }
    },
    removeEvent:function(element,type,fun){
        if(element.addEventListener){
            element.removeEventListener(type,fun)
        }else if(element.attachEvent){
            element.detachEvent("on"+type,fun)
        }else{
            element["on"+type]=null
        }
    }
}
key.addEvent(btn2,"click",dom2)
key.removeEvent(btn2,"click",dom2)
发布了25 篇原创文章 · 获赞 0 · 访问量 636

猜你喜欢

转载自blog.csdn.net/JamesHKK/article/details/104771005