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覆盖了.