Event binding divided into 3
1. Direct binding in html
2.DOM0 level event binding
3.DOM2 level event binding
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)
Compatible with IE wording
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)
