Js事件监听-addEventListener详解

1.什么是addEventListener？

addEventListener是Js中的一个方法全写是EventTarget.addEventListener()，看文章名字就知道它可以监听网页事件
其实该方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window，也可以是任何支持事件的对象（比如 XMLHttpRequest）。

2.addEventListener能干嘛？

简而言之它能够监听网页里面大多数事件，当然也可以修改拦截，譬如：复制、粘贴、视频播放、点击、滑动等等事件...
具体的事件可以参考MDN Web Docs官网查阅所有事件名称以及事件的介绍

3.如何在Js中使用addEventListener？

使用方法如下，直接上代码

//基本使用写法如下

document.addEventListener("事件名称", function(e) {
  alert("当前事件被监听");
  return false;//可返回true 和 false
},false); 


//参数1：监听事件的名称-字符串
//参数2：监听到事件后执行的函数
//参数3：是否捕获冒泡 默认：false， true为捕获事件

//注意：其中的document指的是对象，如果你监听的全局可以换成window
//不是所有的监听都是用document或window，有一些监听是针对的特殊对象

//譬如：视频播放的监听就一定是video元素才能监听到
//先获取到video元素，再将元素注册至addEventListener即可

var elevideo = document.getElementsByTagName("video")[0]
elevideo.addEventListener('play', function () {
    alert("开始播放");
});

举例：部分事件监听举例

//点击事件-click
document.addEventListener("click", function(e) {
 alert("请不要点我");
}); 


//复制事件-copy
document.addEventListener("copy", function(e) { 	
 e = e || window.event; 
 alert("你正在复制内容...");
 e.preventDefault();//拦截
}); 


//剪切事件-cut
document.addEventListener("cut", function(e) {
 alert("监听到了剪切")
 return false;
});


//视频总长度-loadedmetadata(video)
video.addEventListener('loadedmetadata', function () {
    alert(elevideo.duration);
});

//视频播放-play(video)
video.addEventListener('play', function () {
    alert("开始播放");
});

//播放中-playing(video)
video.addEventListener('playing', function () {
   alert("播放中");
});


//这些事件只是冰山一角
//更多事件只需要去查一下事件名称即可
//https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Bjavascript:void(0)uilding_blocks/Events

4.关于事件拦截

一般有三种阻止事件执行的方式，即
event.preventDefault()
event.stopPropagation()
return false

/*
 1、event.preventDefault()
 阻止特定事件的默认行为（只有 cancelable 设置为 true 的事件才可以使用），比如：点击 type=“submit” 的 input 标签提交表单，你在 onclick 事件处理中调用 event.preventDefault()方法， 那么在点击 submit 后就不会自动提交表单了。但是并不阻止事件冒泡。

 2、event.stopPropagation()
 立即停止事件在 DOM 层次中的传播，即阻止事件冒泡。但是，并不阻止默认行为。

 3、return false
*/

//拦截举例 复制事件-copy
document.addEventListener("copy", function(e) { 	
 e = e || window.event; 
 alert("你正在复制内容...");
 e.preventDefault();//拦截复制内容
}); 


//特别说明：事件拦截方法有很多，有一些事件无法用这种方法拦截
//但是大多数的事件是可以拦截的

5.移除addEventListener监听

利用removeEventListener()进行移除,具体案例如下

function goBack (e) {
  console.log(e)
}
document.addEventListener("click",goBack);//添加点击监听

document.removeEventListener('click',goBack)//取消监听抹除goBack事件

最后，感谢您能看到这里，希望这篇文章对你的开发有所帮助~
By 壹影~