摘要：在本教程中，您将了解 JavaScript 事件、事件模型以及如何处理事件。
JavaScript 事件简介事件是 Web 浏览器可以检测和响应的操作，例如鼠标点击或页面加载。
例如，您可能希望在用户点击按钮时显示警报。
事件可能有一个事件处理程序，即在事件发生时运行的函数。事件处理程序，也称为事件侦听器，侦听事件并在事件发生时执行。
假设您有一个 id 为 btn 的按钮
Code language: HTML, XML (xml)要定义一个在点击按钮时将执行的函数，您需要使用 addEventListener() 方法注册一个事件处理程序
let btn = document.querySelector('#btn');
function handleClick() {
alert('It was clicked!');
}
btn.addEventListener('click', handleClick);Code language: JavaScript (javascript)它是如何工作的。
首先，使用 querySelector() 方法选择 id 为 btn 的按钮。其次，定义一个名为 handleClick() 的 函数 作为事件处理程序。第三，使用 addEventListener() 注册事件处理程序，以便当用户点击按钮时，display() 函数将执行。注册事件处理程序的更短方法是将所有代码放在一个 匿名函数 中，如下所示
let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
alert('It was clicked!');
});Code language: JavaScript (javascript)或者，您可以使用 箭头函数
let btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
alert('It was clicked!');
});Code language: JavaScript (javascript) 事件流假设您有以下 HTML 文档
Code language: HTML, XML (xml)当您点击按钮时，点击事件不仅发生在按钮上，还会发生在按钮的容器 div 和整个网页上。
事件流解释了从事件发生的元素开始，并通过 DOM 树传播到页面的顺序。
主要有两种事件模型
事件冒泡事件捕获事件冒泡在事件冒泡模型中，事件从最具体的元素开始，然后向上流向最不具体的元素（document 甚至 window）。
当您点击按钮时，click 事件按以下顺序发生
按钮id 为 container 的 div身体html文件click 事件首先发生在被点击的元素按钮上。然后，click 事件沿着 DOM 树向上移动，在其路径上的每个节点上触发，直到到达 document 对象。
下图说明了用户点击按钮时的事件冒泡效果
请注意，现代 Web 浏览器将事件冒泡到 window 对象。
事件捕获在事件捕获模型中，事件从最不具体的元素开始，并向下流向最具体的元素。
当您点击按钮时，click 事件按以下顺序发生
文件html身体id 为 container 的 div按钮下图说明了事件捕获效果
DOM Level 2 事件流DOM level 2 事件指定事件流有三个阶段
首先，发生事件捕获，这提供了拦截事件的机会。然后，实际目标接收事件。最后，发生事件冒泡，允许对事件进行最终响应。下图说明了用户点击按钮时的 DOM Level 2 事件模型
事件对象当事件发生时，Web 浏览器将一个 Event 对象传递给事件处理程序
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log(event.type);
});Code language: JavaScript (javascript)输出
'click'Code language: JavaScript (javascript)下表显示了 event 对象最常用的属性和方法
属性/方法描述气泡如果事件冒泡，则为真可取消如果可以取消事件的默认行为，则为真当前目标事件正在触发的当前元素defaultPrevented如果调用了 preventDefault()，则返回 true。详细信息有关事件的更多信息eventPhase捕获阶段为 1，目标为 2，冒泡为 3preventDefault()取消事件的默认行为。此方法仅在 cancelable 属性为 true 时有效stopPropagation()取消任何进一步的事件捕获或冒泡。此方法仅在 bubbles 属性为 true 时可以使用。目标事件的目标元素类型触发的事件类型请注意，event 对象只能在事件处理程序内访问。一旦所有事件处理程序都执行完毕，事件对象就会自动销毁。
preventDefault()要阻止事件的默认行为，您使用 preventDefault() 方法。
例如，当您点击链接时，浏览器会将您导航到 href 属性中指定的 URL
JS TutorialCode language: HTML, XML (xml)但是，您可以使用 event 对象的 preventDefault() 方法来阻止这种行为
let link = document.querySelector('a');
link.addEventListener('click',function(event) {
console.log('clicked');
event.preventDefault();
});Code language: JavaScript (javascript)请注意，preventDefault() 方法不会阻止事件向上冒泡 DOM。当事件的 cancelable 属性为 true 时，可以取消事件。
stopPropagation()stopPropagation() 方法会立即停止事件通过 DOM 树的传播。但是，它不会阻止浏览器的默认行为。
请参见以下示例
let btn = document.querySelector('#btn');
btn.addEventListener('click', function(event) {
console.log('The button was clicked!');
event.stopPropagation();
});
document.body.addEventListener('click',function(event) {
console.log('The body was clicked!');
});
Code language: JavaScript (javascript)如果没有 stopPropagation() 方法，您将在控制台窗口中看到两条消息。
但是，click 事件永远不会到达 body，因为在按钮的 click 事件处理程序上调用了 stopPropagation()。
总结事件是 Web 浏览器中发生的事件，例如鼠标点击。事件流有两种主要模型：事件冒泡和事件捕获。DOM Level 2 事件指定事件流有三个阶段：事件冒泡、事件发生在确切的元素上以及事件捕获。使用 addEventListener() 注册一个将事件连接到事件侦听器的事件event 对象只能在事件侦听器内访问。使用 preventDefault() 方法来阻止事件的默认行为，但不会阻止事件流。使用 stopPropagation() 方法来阻止事件通过 DOM 树的传播，但不会取消浏览器的默认行为。测验 本教程是否有用？ 是 否 发送 取消