JS 添加事件|极客笔记

JS 添加事件

在Web开发中，常常需要在用户与页面进行交互时触发特定的响应动作。其中，添加事件是一种常见的操作，它可以使页面具有更加动态和交互性的特点。在JavaScript中，添加事件可以通过addEventListener方法来实现。本文将详细介绍JavaScript中如何添加事件，并举例说明其具体用法。

什么是事件

在Web开发中，事件是指可以被JavaScript代码捕获并作出相应处理的交互行为。用户可以通过鼠标点击、键盘输入、页面加载等方式触发事件。常见的事件包括点击事件、鼠标移动事件、键盘事件等。

添加事件的方法

在JavaScript中，可以通过addEventListener方法来给元素添加事件。addEventListener方法接收三个参数：要监听的事件类型、事件触发时执行的函数、以及一个可选的布尔值参数，用来指定事件是在捕获阶段还是冒泡阶段触发。

// HTML
<button id="btn">点击按钮</button>

// JavaScript
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  alert('按钮被点击了');
});

在上面的代码中，我们通过addEventListener方法给id为’btn’的按钮添加了一个点击事件。当按钮被点击时，会弹出一个提示框显示”按钮被点击了”。

事件传参

有时候，我们需要在事件触发时传递一些参数给事件处理函数。可以通过匿名函数来实现这一功能。

// HTML
<button id="btn">点击按钮</button>

// JavaScript
const btn = document.getElementById('btn');
const message = 'Hello, World!';
btn.addEventListener('click', function() {
  alert(message);
});

在这个示例中，我们在点击按钮时会弹出一个提示框，显示”Hello, World!”。通过匿名函数，我们传递了message参数给事件处理函数。

阻止默认行为

有时候，我们需要在事件触发时阻止默认行为。可以通过preventDefault方法来实现。

// HTML
<a href="https://www.baidu.com" id="link">百度一下</a>

// JavaScript
const link = document.getElementById('link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  alert('默认行为已阻止');
});

在上述代码中，当点击a标签时，会触发默认的跳转行为。通过preventDefault方法，我们可以阻止这一默认行为，并弹出一个提示框显示”默认行为已阻止”。

事件委托

事件委托是指将事件绑定到父元素上，通过事件冒泡来触发子元素上的事件。这样做的好处是减少了对子元素的事件绑定，提高了性能。事件委托适用于同类型元素上的相同事件。

<!-- HTML -->
<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

// JavaScript
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  if(event.target.tagName === 'LI') {
    alert(`点击了${event.target.innerText}`);
  }
});

在上面的代码中，我们将点击事件绑定到父元素ul上，通过判断事件触发的目标元素是否为li，来判断用户点击的是哪一个列表项。这样不仅减少了事件绑定次数，也提高了代码的可维护性。

移除事件

除了添加事件，我们还可以移除事件。可以通过removeEventListener方法来实现。

// HTML
<button id="btn">点击按钮</button>

// JavaScript
const btn = document.getElementById('btn');
const handleClick = function() {
  alert('按钮被点击了');
};
btn.addEventListener('click', handleClick);

// 移除事件
btn.removeEventListener('click', handleClick);

在上述代码中，我们先给按钮添加了一个点击事件，当按钮被点击时会弹出一个提示框。然后通过removeEventListener方法移除了该事件。