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( ) 方法 -- 事件监听

猜你喜欢