首页 > 代码库 > js 事件绑定

js 事件绑定

事件绑定的方式

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(eventfunctionuseCapture)
技术分享
技术分享
 
 removeEventListener()
和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

 

js 事件绑定