JavaScript – 事件

在JavaScript中，事件是一种可以被JavaScript代码侦听和触发的交互行为。通俗来说，就是当用户在浏览器中进行某些操作时（例如点击按钮、键入文本或移动鼠标等），页面就会产生一些特定的事件，我们可以通过编写JavaScript代码来监听这些事件并做出相应的响应。

在JavaScript中，我们可以通过addEventListener()方法以编程方式添加事件的监听器。此外，还有Event对象，可以通过Event对象来操作和获取函数执行时所处的环境上下文等各种信息。

在下面的示例代码中，我们将介绍如何使用addEventListener()方法为按钮添加监听器，并演示如何使用Event对象。

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

myButton.addEventListener('click', function(event) {
  alert('按钮被点击啦！');
  console.log(event);
});

在上面的代码中，我们首先使用了querySelector()方法来获取到一个ID为’myButton’的按钮元素。然后，我们调用了这个按钮元素对象的addEventListener()方法，来给这个按钮添加了一个点击事件的监听器。

这个监听器是一个匿名函数，当按钮被点击的时候，浏览器就会执行这个匿名函数中的代码。在这个示例中，我们用alert()方法弹出一个提示框来告诉用户按钮被点击了，并用console.log()方法输出了Event对象的内容到控制台中。

使用事件委托

在Web开发中，一个很常见的情况是需要处理很多子元素的事件，如列表、表格等的点击事件。在这种情况下，我们可以使用事件委托来解决问题。

所谓事件委托，就是将事件处理程序添加到页面中的父元素上，而不是在每个子元素上添加它。这样，我们就可以通过事件冒泡的机制来处理子元素的事件，而无需在每个子元素上重复添加监听器。

<ul id="myList">
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

在上面的HTML代码中，我们创建了一个无序列表，并给它设置了一个ID为’myList’。

现在，我们来使用事件委托来为每个列表项添加一个点击事件。

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

myList.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName.toUpperCase() === 'LI') {
    const text = target.innerText;
    alert('你选择了：' + text);
  }
});

在这个例子中，我们首先获取到了ID为’myList’的列表元素，并为它添加了一个点击事件的监听器。当这个监听器被触发时，我们通过Event对象获取到了引发事件的事件目标，即单击的列表项。我们通过检查目标元素的tagName属性，来判断是否单击了列表项。如果是列表项，我们就获取它的innerText属性，即选项文本，然后弹出一个提示框，告诉用户选了哪个选项。

自定义事件

在JavaScript中，我们可以自定义事件，并通过Event对象来触发和处理这些事件。

const myObject = {};

myObject.onReady = function() {
  console.log('我已经准备好了！');
};

myObject.triggerReady = function() {
  const event = new Event('ready');
  this.dispatchEvent(event);
};

myObject.addEventListener('ready', myObject.onReady);
myObject.triggerReady(); // 输出 "我已经准备好了！" 到控制台

在上面的例子中，我们首先创建了一个对象myObject，其中包含两个方法：onReady()方法用于处理自定义事件，triggerReady()方法用于触发自定义事件。

triggerReady()方法先创建了一个Event对象。我们给这个Event对象设置了一个’ready’的事件类型，并使用dispatchEvent()方法来将这个自定义事件分派到myObject中。

接着，我们使用addEventListener()方法为对象myObject添加了一个’ready’事件的监听器，并将它指向myObject.onReady方法。

最后，我们调用triggerReady()方法来触发’ready’事件，这就会调用myObject.onReady函数，将一条’我已经准备好了！’的信息输出到控制台。

这就是自定义事件的基本用法，我们可以通过自定义事件来更灵活地实现一些需要监听和处理的交互行为。

阻止默认事件

在JavaScript中，可以通过Event对象来阻止事件的默认行为。默认情况下，当某个元素的某个事件被触发时，浏览器会执行该事件的默认操作。例如，当用户点击一个链接时，浏览器会把用户重定向到链接所指向的页面。

但是，在某些情况下，我们可能需要阻止默认事件的发生，以便在我们的代码中做一些特殊的逻辑处理。我们可以使用Event对象的preventDefault()方法来实现这个目的。

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

在上面的HTML代码中，我们创建了一个链接元素，并给它设置了一个ID为’myLink’。

现在，让我们给这个链接元素添加点击事件，并在点击时阻止它的默认事件。

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

myLink.addEventListener('click', function(event) {
  event.preventDefault();
  alert('你单击了链接！');
});

在这个例子中，我们获取了ID为’myLink’的链接元素，并为它添加了一个点击事件的监听器。当链接被单击时，监听器就会被触发。

在监听器中，我们调用了Event对象的preventDefault()方法，这就会阻止链接的默认事件的发生。最后，我们弹出一个提示框来告诉用户，链接被单击了。

停止事件冒泡

在JavaScript中，事件冒泡是指事件从目标元素开始，沿着它的祖先元素向上传播的过程。在某些情况下，我们可能会希望停止事件冒泡，以防止其他元素捕获这个事件。

我们可以使用Event对象的stopPropagation()方法来实现停止事件冒泡。在下面的例子中，我们演示了如何使用stopPropagation()方法来停止事件冒泡。

document.querySelector('#myLink').addEventListener('click', function(event) {
  alert('链接被单击！');
  event.stopPropagation();
});

document.querySelector('body').addEventListener('click', function(event) {
  alert('页面被单击！');
});

在这个例子中，我们为一个链接元素和页面的body元素分别绑定了一个点击事件监听器。当链接元素被单击时，它的监听器就会被触发，并弹出一个提示框，告诉用户链接被单击了。

但是，如果我们没有调用Event对象的stopPropagation()方法，这个事件就会继续向上传播，最终被body元素的监听器所捕获，并弹出另一个提示框，告诉用户页面被单击了。

如果我们调用了Event对象的stopPropagation()方法，事件冒泡就会在链接元素处停止，也就是说，页面的body元素将不再捕获这个事件。