事件绑定的方式
1. DOM 元素行内绑定
<div onclick="alert(1)"></div>
2. js on+eventType
document.onclick =function(){alert(2)}
3. addEventListener
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
4.addEvent
addEvent( document.getElementById('foo'), 'click', doSomething );
5. attachEvent
document.attachEvent('click',function(){alert(5)});
特点区别
| DOM 元素行内绑定 | js on+eventType | attachEvent | addEventListener | addEvent |
| 事件处理程序与html结构混杂在一起 由于该方法的事件函数是全局的，很容易命名冲突 |
该方法限制了绑定事件处理的函数的次数
document.onclick =function(){alert(2)}
document.onclick =function(){alert(3)}
3会覆盖2
|
绑定多个不会被覆盖 |
可以绑定多个事件但不会被覆盖
回调函数内的this指向target本身
element.addEventListener(event, function, useCapture)
|
和addEventListener的却别 回调函数this指向window |
例子
|
document.onclick =function(){alert(1)}
document.onclick =function(){alert(2)}
document.onclick =function(){alert(3)}
|
document.attachEvent('click',function(){alert(1)})
document.attachEvent('click',function(){alert(2)})
document.attachEvent('click',function(){alert(3)})
|
document.addEventListener('click',function(){alert(1)},false)
document.addEventListener('click',function(){alert(2)},false)
document.addEventListener('click',function(){alert(3)},false)
|
| 3 | 3 2 1 | 1 2 3 |