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( event,  function,  useCapture)     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