js中监听注册事件addEventListener的使用

语法&＃xff1a;

element.addEventListener(&＃39;type&＃39;,function()[,useCapture])

将指定的监听器注册到element&＃xff08;目标对象&＃xff09;上&＃xff0c;当对该对象触发指定的事件时&＃xff0c;就会执行事件处理函数

type&＃xff1a;事件类型字符串 如&＃xff1a;click mouseover(鼠标经过) 等 注意这里不要加on&＃xff01;

useCapture&＃xff1a;可写可不写参数 是一个布尔值 默认是false

特点&＃xff1a;同一个元素 同一个事件可以注册多个监听器 但是使用传统的element.onclick &＃61; function(){} 一个事件只能注册一个点击函数

案例&＃xff1a;此时点击btn 会相继弹出两个对话框 但是使用传统方式onclick 只会显示第二个‘你好2’ 因为会把第一个覆盖掉

提交



 上面只讲了括号里的两个参数 下面就来讲第三个参数useCapture的使用方法 默认fasle

element.addEventListener(&＃39;type&＃39;,function()[,useCapture])

第三个参数如果是true 表示在事件捕获阶段 如果是false 表示事件在冒泡阶段

注&＃xff1a;实际开发中很少使用事件捕获 更关注的事件冒泡

冒泡和捕获只能写其中一个 useCapture要么默认false 要么true

有些事件是没有冒泡的 如oblur onfous onmouseenter onmouseleave

案例&＃xff1a;

相关知识点 和这个一起常用的&＃xff1a;js中删除事件removeEventListener的使用