addEventListener( ) 方法 -- 事件监听

addEventListener()方法，即为事件监听；且同一元素目标可重复添加，不会覆盖之前相同事件；可以使用removeEventListener()方法来移除事件的监听。

语法： element.addEventListener(event,function,useCapture);

其中第一个参数是事件的类型（如“click”或“mousedown”）

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意：不要使用“on”前缀。例如，使用“click”,而不是使用“onclick”。element 可以是 window、document等。

        window.addEventListener('click',function(){console.log('click') },true)window.addEventListener('click',()=>{console.log('click')})document.getElementById("myDiv").addEventListener("click", myFunction, true);

如何移除监听事件呢？

emoveEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

参数一的事件类型可有(转载)：
鼠标事件
click 当用户点击某个对象时调用的事件句柄。
contextmenu 在用户点击鼠标右键打开上下文菜单时触发
dblclick 当用户双击某个对象时调用的事件句柄。
mousedown 鼠标按钮被按下。
mouseenter 当鼠标指针移动到元素上时触发。
mouseleave 当鼠标指针移出元素时触发
mousemove 鼠标被移动。
mouseover 鼠标移到某元素之上。
mouseout 鼠标从某元素移开。
mouseup 鼠标按键被松开。

键盘事件
属性描述 DOM
keydown 某个键盘按键被按下。
keypress 某个键盘按键被按下并松开。
keyup 某个键盘按键被松开。

表单事件
blur 元素失去焦点时触发
change 该事件在表单元素的内容改变时触发( , , , 和 )
focus 元素获取焦点时触发
focusin 元素即将获取焦点是触发
focusout 元素即将失去焦点是触发
input 元素获取用户输入是触发
reset 表单重置时触发
search 用户向搜索域输入文本时触发

什么是事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获

事件传递定义了元素事件触发的顺序。如果将<p>元素插入到<div>元素中，用户点击<p>元素，哪个元素的“click”事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>元素的点击事件。

在捕获中，外部元素会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener( event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

具体简单的示例可以查看菜鸟教程

addEventListener( ) 方法 -- 事件监听相关推荐

JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总鼠标事件键盘事件表单事件读取事件 onload与onpageshow事件区别其它事件 addEventListener()添加事件监听 ...
js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )
JS用addEventListener添加事件监听方法后,可以用removeEventListener来解除监听: element.removeEventListener(event, myFunct ...
雷火神山直播超两亿，Web播放器事件监听是怎么实现的？
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播.在视频业务大数据平台中,播放数据的统计分析非常重要,所以We ...
addEventListener() 方法，事件监听
addEventListener() 方法,事件监听你可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(event ...
addEventlistener()方法，事件监听
addEventListener()方法,即为事件监听:可以使用removeEventListener()方法来移除事件的监听. element 可以是 window.document.oDiv 等 ...
扫盲-----addEventlistener()方法，事件监听(一)
一.扫盲事件起因时间:2018年6月1日周五下午,原本我以为我已经把当前的bug改好,应该没啥问题了,坐等下班公司聚餐(开心) 突然,隔壁同组大哥,哎....cp,你看看,你这个首页报了很多错哎.我 ...
addEventListener事件监听传递参数
Flash as3 addEventListener事件监听传递参数 var sayHello:String = "how are you"; btn1.addEventListe ...
EventTarget.addEventListener()事件监听
文章目录 EventTarget.addEventListener()的意义和原理什么是事件监听 addEventListener()的原理 addEventListener()的语法 addEve ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...

addEventListener( ) 方法 -- 事件监听

addEventListener( ) 方法 -- 事件监听相关推荐

最新文章

热门文章