onClick与addEventListener

<div id="div1" onclick="fn()"></div>
<script type="text/javascript">
	document.getElementById('div1').addEventListener('click',function(){
		alert(1)
	})
	document.getElementById('div1').addEventListener('click',function(){
		alert(2)
	})
	function fn(){
		alert(3)
	}
	function fn(){
		alert(4)
	}
	结果:
	4
	1
	2
</script>

一目了然:

1.onclick事件在同一时间只能指向唯一对象
2.addEventListener给一个事件注册多个listener
3.addEventListener对任何DOM都是有效的,而onclick仅限于HTML
4.addEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除
5.IE9使用attachEvent和detachEvent

上一篇:8 个你不知道的 DOM 功能[每日前端夜话0x79]


下一篇:第三天_WebAPIs