JavaScript中的事件监听-猿码集

1. 事件监听的概念

在JavaScript中，事件是在代码执行过程中发生的某些交互性的动作或行为，比如用户点击按钮、页面滚动等等。事件监听则是一种机制，它可以让开发者在代码中监听指定的事件，当事件被触发时，会自动执行监听器绑定的代码。

在Web开发中，事件监听广泛应用于交互性的功能上，比如表单的提交、鼠标悬停效果、页面跳转等。

2. 事件监听的实现方式

在JavaScript中，有多种实现事件监听的方式，包括：

2.1 HTML标签属性绑定方式

可以在HTML标签上绑定事件属性，比如：


<button onclick="alert('Hello World!')">
  Click me!
</button>

这样，当用户点击这个按钮时，会弹出一个对话框显示"Hello World!"。但是，这种方式存在一些问题：

代码可读性差，难以维护

容易造成形式与逻辑的耦合

2.2 DOM对象属性绑定方式

可以在DOM对象上绑定事件处理函数，比如：


<button id="myButton">
  Click me!
</button>
<script>
  const myButton = document.querySelector('#myButton');
  myButton.onclick = function() {
    alert('Hello World!');
  }
</script>

这样，当用户点击按钮时，会弹出一个对话框显示"Hello World!"。这种方式相对于HTML标签属性绑定方式，代码可读性更好，易于维护，但是存在一个缺点：

事件绑定是单向的，后绑定的会覆盖先绑定的

2.3 addEventListener方法绑定方式

可以使用addEventListener方法来绑定事件处理函数，比如：


<button id="myButton">
  Click me!
</button>
<script>
  const myButton = document.querySelector('#myButton');
  myButton.addEventListener('click', function() {
    alert('Hello World!');
  });
</script>

这样，当用户点击按钮时，会弹出一个对话框显示"Hello World!"。这种方式相对于DOM对象属性绑定方式，事件绑定是双向的，不会覆盖先绑定的事件处理函数。

3. 事件监听的基本使用

在JavaScript中，事件监听可以用来实现很多交互性的功能。下面是一个简单的例子，展示如何在HTML中通过事件监听改变元素的样式。


<button id="myButton">
  Change background color!
</button>
<script>
  const myButton = document.querySelector('#myButton');
  myButton.addEventListener('click', function() {
    const body = document.querySelector('body');
    body.style.backgroundColor = 'blue';
  });
</script>

在这个例子中，当用户点击按钮时，会将网页的背景颜色改变为蓝色。通过addEventListener方法监听按钮的click事件，然后在事件处理函数中获取body元素，修改其样式，从而实现了网页背景色的改变。

4. 事件监听的高级使用

4.1 事件监听传参

有时候，在事件处理函数中需要获取一些事件相关的参数，比如事件源对象、事件类型等等。可以通过事件对象event来获取这些参数。


<button id="myButton">
  Click me!
</button>
<script>
  const myButton = document.querySelector('#myButton');
  myButton.addEventListener('click', function(event) {
    console.log(event.target); // 输出按钮对象
    console.log(event.type); // 输出事件类型
  });
</script>

在这个例子中，当用户点击按钮时，会在控制台输出按钮对象和事件类型。通过事件处理函数的参数event来获取事件源对象event.target和事件类型event.type。

4.2 取消事件监听

可以通过removeEventListener方法来取消事件监听。该方法的参数需与addEventListener方法的参数一致。下面是一个示例：


<button id="myButton">
  Click me!
</button>
<script>
  function myClickHandler() {
    console.log('Clicked!');
  }
  const myButton = document.querySelector('#myButton');
  myButton.addEventListener('click', myClickHandler);
  setTimeout(function() {
    myButton.removeEventListener('click', myClickHandler);
  }, 5000);
</script>

在这个例子中，当用户点击按钮时，会在控制台输出"Clicked!"。在事件处理函数myClickHandler中，可以执行一些操作，比如发送AJAX请求等等。通过addEventListener方法给按钮绑定click事件的处理函数，然后在5秒后，通过removeEventListener方法将该事件移除。

4.3 事件委托

事件委托是指将事件处理函数绑定在其父元素上，通过事件冒泡机制来响应子元素上的事件。这种方法可以避免子元素动态添加时需要重新绑定事件的问题，从而提高代码的效率。


<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<script>
  const myList = document.querySelector('#myList');
  myList.addEventListener('click', function(event) {
    if (event.target.nodeName === 'LI') {
      console.log(event.target.textContent);
    }
  });
</script>

在这个例子中，当用户点击li元素时，会在控制台输出其文本内容。通过事件处理函数的参数event来获取事件源对象event.target，进而判断该元素是否为li元素，如果是，就输出其文本内容。

5. 总结

通过本文，我们了解了JavaScript中事件监听的基本概念和实现方式，以及一些常用的高级技巧。事件监听是开发交互性功能必不可少的技术之一，不仅可以提高代码的效率，也可以改善用户体验。

JavaScript中的事件监听