绑定事件三种方法,
第一种,
<div style="width: 100px;height: 100px;background-color:red;"></div>
var div =document.getElementsByTagName('div')[0];
div.onclick=function(){
console.log('a')
console.log(this)
}//this本应该指向div元素,但是这里并没有指向dom本身,而且他不被读取
div.onclick=function(){
console.log('b')
}//b 对一个元素绑定两个这样的事件时,后者会覆盖前者
第二种方法,obj.addEventListener(事件类型,事件函数,flase)
这个方法可以为同一个dom元素绑定多个事件
div.addEventListener('click',function(){
console.log('a')
console.log(this)//this指向自身
},false)
div.addEventListener('click',function(){
console.log(this)
console.log(a)
},false)//a a
第三种方法,obj.attachEvent(‘on’+type,fn) 只有ie支持,其他浏览器不支持
div.attachEvent('onclick',function(){
console.log(this)
})//this指向window,但是我用ie也不识别该函数
2,点击li按顺序输出li序号事件
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
var li=document.getElementsByTagName('li');
for(let i=0;i<=li.length-1;i++){
li[i].addEventListener('click',function(){
console.log(i)
},false)
//如果用var而不是let,那么点击任何一个li都会是3
var li=document.getElementsByTagName('li');
for(var i=0;i<=li.length-1;i++){
(function(i){
li[i].addEventListener('click',function(){
console.log(i)
},false)
}(i))
}//闭包也可以处理
//封装一个兼容各个浏览器的绑定事件函数
function addEvent(element , type,handle){
if(element.addEventListener){ element.addEventListener(type,handle,false);
}else if(element.attachEvent){ element.attachEvent("on"+type,function(){
handle.call(element)
})
}else{
element['on'+type]=handle
}
}
3解除事件
div.onclick=null
1 div.onclick=function(){
console.log('b')
this.onclick=null;
}
//只生效一次的点击事件
2 div.addEventListener=function text(){
console.log('b')
}
div.removeEventListener('click',text , false)
3 ele.detachEvent('on'+type,fn);
如果绑定匿名函数,则无法解除