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

时间:2022-08-30 19:21:30

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

大家好,我是前端进阶者。JavaScript事件处理程序的最新功能是事件监听。事件监听监视元素上的事件。

一、addEventListener()方法

 

addEventListener()方法将事件处理程序附加到指定的元素。

可以重写随机颜色,如下所示:

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <title>项目(nhooo.com)</title> 
  4.  
  5.     <body style="background-color: aqua;"
  6.  
  7.         <p>单击下面的按钮以更改文档的背景颜色:</p> 
  8.  
  9.         <button>点我改变背景颜色</button> 
  10.  
  11.         <script> 
  12.             let btn = document.querySelector("button"); 
  13.             btn.addEventListener("click", bgChange); 
  14.  
  15.             function bgChange() { 
  16.                 let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"
  17.                 document.body.style.backgroundColor = color; 
  18.             } 
  19.  
  20.             function random(number) { 
  21.                 return Math.floor(Math.random() * (number + 1)); 
  22.             } 
  23. </script> 
  24.  
  25.     </body> 
  26. </html> 

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

将addEventListener()方法附加到按钮上。addEventListener()接受两个必填参数-要监听的事件和监听器回调函数。

1. 语法

 

  1. element.addEventListener(event, listener, useCapture) 

代码解析:

第一个参数是事件的类型(例如“ click”或“ mousemove”)。

第二个参数是事件发生时我们要调用的监听函数。

第三个参数是一个布尔值,指定是使用事件捕获。此参数是可选的。

注意:

不要为事件使用“ on”前缀。使用“ click”代替“ onclick”。

2. 将事件监听添加到元素

 

将所有代码放入addEventListener()方法中的匿名函数中是非常合适的,如下所示:

  1. <script> 
  2. let para = document.querySelector("#para"); 
  3.  
  4. para.addEventListener("click"function() { 
  5. this.innerHTML = "Hello world"
  6. }); 
  7. </script> 

还可以引用外部“命名”函数:

示例

  1. <script> 
  2. let para = document.querySelector("#para"); 
  3. para.addEventListener("click", changeText); 
  4.  
  5. function changeText() { 
  6. para.innerHTML = "Hello world"
  7. </script> 

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

3. 将多个事件监听添加到同一元素

 

事件监听似乎与事件处理程序属性非常相似,但是它们有一些优点。我们可以在同一元素上设置多个事件监听,如以下示例所示:

  1. <script> 
  2. document.querySelector("button").addEventListener("click", myFunc); 
  3. document.querySelector("button").addEventListener("click", anotherFunc); 
  4.  
  5. function myFunc() { 
  6. document.body.style.backgroundColor = "coral"; //改变背景颜色 
  7.  
  8. function anotherFunc() { 
  9. document.body.style.fontSize = "2rem"; //改变字体大小 
  10. </script> 

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

可以向元素添加不同类型的事件:

示例

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

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

4. 传递参数

 

传递参数值时,请使用匿名函数,该函数使用参数调用指定的函数:

  1. var btn = document.querySelector("button"); 
  2.    btn.addEventListener("click"function() { 
  3.    myFunc(x, y); 
  4. }); 

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

5. 将事件监听添加到Window对象

 

此外,可以addEventListener()在文档和窗口对象上使用。

本示例使用以下addEventListener()方法将click事件附加到文档:

  1. document.addEventListener("click"function() { 
  2. alert("Hello World!!!"); 
  3. }); 

使用该addEventListener()方法将调整大小(resize)事件附加到窗口:

  1. window.addEventListener("resize"function() { 
  2. box.innerHTML = Math.random(); 
  3. }); 

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

当前,事件监听是处理JavaScript中事件的最常见和首选方式。

二、removeEventListener()方法

 

可以使用该removeEventListener()方法从元素中删除一个或所有事件。

语法:

  1. var box = document.getElementById("para"); 
  2.  
  3.  // Attach an event handler to a P element with id="para" 
  4.  box.addEventListener("mousemove", myFunc); 
  5.  
  6.  // Remove the event handler from a P element with id="para" 
  7.  box.removeEventListener("mousemove", myFunc); 

案例:

  1. <script> 
  2.       // 使用以下代码将事件处理程序附加到 id="para" 
  3.       var box = document.getElementById("para"); 
  4.       box.addEventListener("mousemove", myFunc); 
  5.  
  6.       function myFunc() { 
  7.         box.innerHTML = Math.random(); 
  8.       } 
  9.  
  10.       function removeHandler() { 
  11.         //从id="para"的P元素中删除事件处理程序 
  12.         box.removeEventListener("mousemove", myFunc); 
  13.       } 
  14. </script> 

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

第一个参数是事件的类型(例如“ click”或“ mousemove”)。

第二个参数是事件发生时我们要调用的函数。

三、总结

 

本文基于JavaScript基础,介绍了如何进行JavaScript事件监听 ,从最基本的语法开始,如何将事件监听添加到元素,如何进行参数传递,如何添加到Window对象等等,都做了详细的讲解。通过用丰富的案例帮助大家更好理解。

我是前端进阶者。使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

原文地址:https://mp.weixin.qq.com/s/H_ru332cUvRaxOpMf36OXw