addEventListener方法和on的区别

on事件

• Javascript中可以对一些页面的事件设定触发值 , 例如常用的点击click 鼠标移动onmousemove等等,可以对其设定值来实现事件触发后执行的操作

addEventListener()方法

• addEventListener(‘click’,function,Boolean)

• 参数click表示监听事件 : click等,就是之前不加前缀 on 的事件(必写)

• 参数function表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数(必写)

• 参数Boolean(选填) 是true/false 填写true是捕获事件,填写false是冒泡事件(默认的是false)

  冒泡跟捕获的区别

• 冒泡是从内到外依次触发事件,(从子元素向父元素延伸)

• 捕获刚好相反, 是从外到内依次触发事件

addEventListener和on的区别

• 为某元素设定事件触发函数时 , addEventListener除了可以设置元素触发顺序外，还可以多次绑定事件.
• on 事件多次绑定的话会被覆盖 , 只能绑定一个事件

例子 :

addEventListener

<div style="height:200px;width:200px;background-color:red">点击</div>
<script>
	var box = document.getElementsByTagName("div")[0];
	box.addEventListener('click', function(){
		alert("mesg1");
	});
	box.addEventListener('click', function(){
		alert("mesg2");
	});
</script>

依次弹出mesg1 和 mesg2.

on

box.onclick = function(){
	alert("message1");
};
box.onclick = function(){
	alert("message2");
}

只弹出mesg2 , 因为mesg1被mesg2覆盖了.