事件绑定,事件监听,事件委托
事件绑定
一个元素只能绑定一个事件
obj.on+事件名称=funciton(){
}
事件监听
事件监听可以监听很多很多事件。
this指向当前调用触发事件的主体对象。
添加:
obj.addEventListener("事件名称",funciton (){},boolean)
解绑:
但是这样不能删除↓:
obj.addEventListener("事件名称",funciton fn (){console.log("1")},boolean)
obj.removeEventListener("事件名称",funciton fn (){console.log("1")},boolean)
因为不是同一个对象,因为地址不一样。(内存空间不一样!)
想要删除只能:
funciton fn (){console.log("1");} //内存空间一样了
obj.addEventListener("事件名称",fn,boolean)
obj.removeEventListener("事件名称",fn,boolean)
解绑本function(严格模式里不能用
let i=0;
demo.addEventListener("click",function(){
console.log("当前点击了"+(i++)+"次");
if(i>9){
demo.removeEventListener("click",arguments.callee);
}
})
attachEvent:
事件监听封装函数:
let EventUtil={
addHandle:function(ele,type,handle,boo){
if(ele.addEventListener){
ele.addEventListener(type,handle,boo)
}else if(ele.attachEvent){
ele.attachEvent("on"+type,handle,boo)
}else{
ele["on"+type]=handle;
}
},
removeHandle:function(ele,type,handle,boo){
if(ele.removeEventListener){
ele.removeEventListener(type,handle,boo)
}else if(ele.removeEvent){
ele.removeEvent("on"+type,handle,boo)
}else{
ele["on"+type]=handle;
}
}
}
function fn(){
console.log("a");
}
EventUtil.addHandle(demo,"click",fn,false);
事件委托
target是指事件函数是给哪一个值触发的(具体哪个元素
ev.target.tagName==="LI"
//ex target是火狐,谷歌都有的
obj.addEventListener("click",funciton(ev){
if(ev.target.tagName==="LI"){
fn();
}
})