Javascript添加监听与删除监听用法详解

Javascript事件监听可以帮助我们监测用户的交互行为，从而进行相应操作。在实际开发中，添加和删除事件监听都是非常常见和有用的操作。下面来详细讲解Javascript添加监听与删除监听的用法。

添加监听

在Javascript中，我们可以使用addEventListener方法来添加事件监听。该方法接受三个参数，分别是要监听的事件名、事件处理函数和一个可选的布尔值。

以下代码是给一个按钮添加onclick事件监听的例子：

const button = document.querySelector('button');
function handleClick() {
  console.log('Button clicked');
}
button.addEventListener('click', handleClick);

以上代码的作用是给按钮添加一个点击事件监听，并在该按钮被点击时调用handleClick函数。在实际使用中，可以根据需要添加不同类型和数量的事件监听。

删除监听

当不再需要监听某个事件时，可以采用removeEventListener方法来删除该事件的监听器。该方法同样接受三个参数，分别是要删除的事件名、事件处理函数和一个可选的布尔值，其用法与addEventListener方法一致。

以下代码是从一个按钮上删除onclick事件监听的例子：

const button = document.querySelector('button');
function handleClick() {
  console.log('Button clicked');
}
button.addEventListener('click', handleClick);
// some code
button.removeEventListener('click', handleClick);

以上代码的作用是先给按钮添加一个点击事件监听，并在该按钮被点击时调用handleClick函数；然后在其它代码处理完成后，将该事件监听删除。

需要注意的是，使用removeEventListener方法时，要确保要删除的事件处理函数与添加时的相同。

示例说明

接下来举两个实际应用场景的例子来说明Javascript添加监听与删除监听的用法。

示例一

在一个页面中，有两个按钮分别用于开关灯，要求点击不同的按钮可以分别开或关灯。这个功能的实现，需要添加点击事件监听，并在按钮被点击时根据当前的状态进行相应操作。

以下是示例代码：

<button id="lightOn">开灯</button>
<button id="lightOff">关灯</button>

const lightOnBtn = document.querySelector('#lightOn');
const lightOffBtn = document.querySelector('#lightOff');
const bulb = document.querySelector('.bulb');
let isOn = false;

function handleLightOn() {
  if (!isOn) {
    bulb.classList.add('on');
    isOn = true;
  }
}

function handleLightOff() {
  if (isOn) {
    bulb.classList.remove('on');
    isOn = false;
  }
}

lightOnBtn.addEventListener('click', handleLightOn);
lightOffBtn.addEventListener('click', handleLightOff);

以上代码中，定义了两个事件处理函数handleLightOn和handleLightOff分别对应开灯和关灯操作。在页面中分别添加了两个按钮，并添加了点击事件监听，当按钮被点击时，对应的操作会被执行。

示例二

在一个动态生成的列表中，有一些条目需要删除按钮。当点击删除按钮时，对应的条目应该被删除。这个功能的实现，需要添加删除按钮的点击事件监听，并在按钮被点击时根据当前的状态进行相应操作。

以下是示例代码：

<ul id="list">
  <li><span>条目一</span><button class="delete-btn">删除</button></li>
  <li><span>条目二</span><button class="delete-btn">删除</button></li>
  <li><span>条目三</span><button class="delete-btn">删除</button></li>
</ul>

const list = document.querySelector('#list');

function handleDelete(event) {
  const listItem = event.target.closest('li');
  if (listItem) {
    listItem.remove();
  }
}

list.addEventListener('click', function(event) {
  if (event.target.matches('.delete-btn')) {
    handleDelete(event);
  }
});

以上代码中，在ul元素上添加了点击事件监听，并通过判断事件的目标元素是否是删除按钮，来决定是否执行删除操作。在handleDelete函数中，使用了closest方法来找到最近的li元素，并将其从DOM中删除。