事件:点击、keydown、拖拽
绑定事件的意思是:绑定事件处理函数
<div></div>
<script>
var div = document.getElementsByTagName('div')[0];
// div具有点击事件 后面的function是事件触发的方法
div.onclick = function(){
}
</script>
事件处理有三种方法
1、on+‘event-type’ 句柄的写法 兼容性最好
this指向dom元素
2、addEventListener(‘event-type’,function(){},false)
w3c的标准方法,ie9以下不兼容
this指向dom元素
<div style="width:100px;height:100px;background:rebeccapurple;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
div.addEventListener('click',function(){
console.log('a');
},false);
</script>
```
同一个函数不可以同一个对象的同一事件绑定多次。
```
解决this指向问题
<div style="width:100px;height:100px;background:red;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){
console.log(this);
});
</script>
//输出 [object Window]
<div style="width:100px;height:100px;background:red;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick',function(){
handle.call(div);
});
function handle(){
console.log(this);
}
</script>
//输出 [object HTMLDivElement]
4、写个兼容ie和chrome的
<div style="width:100px;height:100px;background:red;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
function addEvent(ele,type,handle){
if(ele.addEventListener){
ele.addEventListener(type,handle,false);
}
else if(ele.attachEvent){
ele.attachEvent('on'+type,function(){
handle.call(ele);
});
}else{
ele['on'+type] = handle;
}
}
addEvent(div,'click',function(){
console.log('c');
});
</script>
5、解除事件绑定的方法
<div style="width:100px;height:100px;background:red;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
// 解除事件的三种方法
// on+'type'
// div.onclick = function(){
// console.log('a');
// 方法一:
// this.onclick = null/''/false;
// }
// div.addEventListener('click',test,false)
// 方法二:(绑定事件时不能使用匿名函数,否则不能解除事件绑定)
// div.removeEventListener('click',test,false);
// function test(){
// console.log('c');
// }
// div.attachEvent('onclick',test);
// 方法三:
// div.detachEvent('onclick',test);
// function test(){
// console.log('d');
// }
</script>