js 事件绑定

Posted 2020-08-15 吴盼盼

事件绑定的方式

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