一.赋值式(DOM0级事件绑定):ele.事件类型=function(){}
不能重复绑定
var obox = document.querySelector(".box")
obox.onclick = function(){
console.log(1)
}
obox.onclick = function(){
console.log(2)
}
上式结果得到 2 , 覆盖效果
删除事件
obox.onclick.null; 得到 空
二.监听式(DOM2级事件绑定)
特定的方法实现:ele.addEventListener
能重复绑定
obox.addEventListener("click",function(){ console.log("hello") //hello },false) obox.addEventListener("click",function(){ console.log("world") //world },false) 能全部打印出来 删除事件监听:
obox.removeEventListener(type,fn,false) obox.removeElementListener("click",fn1,false) obox.removeElementListener("click",fn1,false) 以下是IE浏览器的支持 绑定:obox.attachEvent(type,fn) ele前加 ”on“ console.log(box,attachEvent) obox.attachEvent("onclick",fn1) function fn1(){ console.log("hhaha") } obox.attachEvent("onclick",fn2) function fn2(){ console.log("heihhh") } 删除: obox.detachEvent("onclick",fn1) 兼容 function addEvent(ele,type,cb){ if(ele.attachEvent){ ele.attachEvent("on"+type,cb) }else{ ele.addEventListener(type,cb,false) } } function removeEvent(ele,type,cb){ if(ele.detachEvent){ ele.detachEvent("on"+type,cb) }else{ ele.removeEventListener(type,cb,false) } }
事件流的状态:
事件的触发顺序
事件冒泡:从里向外
事件捕获:从外向里
true:捕获
false:冒泡
目标阶段当前元素房前事件
var obox = document.querySelector(".box")
var obox1 = document.querySelector(".box1")
var obox2 = document.querySelector(".box2")
obox.addEventListener("click",function(){
alert("red的冒泡")
},false)
obox.addEventListener("click",function(){
alert("red的捕获")
},true)
obox1.addEventListener("click",function(){
alert("green的冒泡")
},false)
obox1.addEventListener("click",function(){
alert("green的捕获")
},true)
obox2.addEventListener("click",function(){
alert("blue的冒泡")
},false)
obox2.addEventListener("click",function(){
alert("blue的捕获")
},true)