一篇文章带你了解JavaScript事件监控

大家好，我是前端进阶。JavaScript事件处理程序的最新特性是事件监听。事件侦听器监视元素上的事件。1.addEventListener()方法addEventListener()方法将事件处理程序附加到指定的元素。随机颜色可以覆盖如下：示例：

点击下方按钮更改文档背景色：

点我更改背景色将addEventListener()方法附加到按钮。addEventListener()接受两个必需的参数——要侦听的事件和侦听器回调函数。1.语法element.addEventListener(event,listener,useCapture)代码分析：第一个参数是事件的类型（比如“click”或者“mousemove”）。第二个参数是事件发生时我们要调用的监听函数。第三个参数是一个布尔值，指定要使用事件捕获。此参数是可选的。注意：不要对事件使用“on”前缀。使用“点击”而不是“点击”。2.给元素添加事件监听器将所有代码放在addEventListener()方法中的一个匿名函数中是非常合适的，像这样：您还可以引用外部“命名”函数：Example3.为同一个元素添加多个事件监听器事件监听器看似和事件处理器属性很相似，但是它们有一些优点。我们可以在同一个元素上设置多个事件监听器，如下例所示："click",anotherFunc);functionmyFunc(){document.body.style.backgroundColor="coral";//改变背景色}functionanotherFunc(){document.body.style.fontSize="2rem";//改变背景色fontsize}可以给元素添加不同类型的事件：例4.传递参数传递参数值时，请使用匿名函数，该函数使用参数调用指定的函数：例varbtn=document.querySelector("按钮”）;btn.addEventListener("点击",function(){myFunc(x,y);});5.为Window对象添加事件侦听器此外，addEventListener()可用于document和window对象。此示例使用以下addEventListener()方法将点击事件附加到文档：document.addEventListener("click",function(){alert("HelloWorld!!!");});使用addEventListener()方法将调整大小（resize）事件附加到窗口：window.addEventListener("resize",function(){box.innerHTML=Math.random();});目前，事件监听是JavaScript中处理事件的最常见和首选的方式。2.removeEventListener()方法您可以使用removeEventListener()方法从元素中删除一个或所有事件。语法：varbox=document.getElementById("para");//AttachaneventhandlertoaPelementwithid="para"box.addEventListener("mousemove",myFunc);//RemovetheeventhandlerfromaPelementwithid="para"box.removeEventListener("mousemove",myFunc);case:第一个参数是事件类型（比如“点击”或“鼠标移动”）。第二个参数是事件发生时我们要调用的函数。3.小结本文以JavaScript为基础，介绍如何监听JavaScript事件。从最基本的语法开始，已经详细讲解了如何给元素添加事件监听器，如何传递参数，如何给Window对象添加等等。.通过使用丰富的示例来帮助大家更好地理解。我是前端进阶。使用JavaScript语言方便大家更好的理解，希望对大家的学习有所帮助。