壹影博客.
我在下午4点钟开始想你
Js事件监听-addEventListener详解
  • 2023-2-15日
  • 0评论
  • 719围观

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 壹影~

发表评论