JavaScript 事件流、事件处理程序及事件对象总结

下面给出关于 JavaScript 事件流、事件处理程序及事件对象总结的详细攻略。

1. 事件流

事件流描述的是从页面中接收事件的顺序，分为三个阶段：

• 捕获阶段：事件从最外层的容器开始向下传递到目标元素。
• 目标阶段：事件到达目标元素。
• 冒泡阶段：事件从目标元素开始向上冒泡到最外层的容器。

在标准 W3C 的事件模型中，事件传递的顺序是从上往下的（捕获阶段）、到达目标元素（目标阶段）再向上冒泡（冒泡阶段）。而在 IE 浏览器中事件传递的顺序是从下往上的（事件冒泡），直到最外层的容器。

2. 事件处理程序

事件处理程序是处理特定事件的函数。可以通过 DOM 或 HTML 属性将事件处理程序指定给元素。最常见的方式是使用 HTML 属性：

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

也可以使用 DOM 方法：

const button = document.getElementById('myBtn');
button.onclick = function() {
  alert('Clicked!');
};

使用 addEventListener() 方法动态注册：

const button = document.getElementById('myBtn');
button.addEventListener('click', function() {
  alert('Clicked!');
});

除了添加较多的灵活性外，通过使用 addEventListener() 也可以为同一元素的同一事件添加多个处理程序。

3. 事件对象

在事件处理程序内部，可以访问事件对象 event。事件对象包含与事件相关的所有信息，例如事件类型、目标元素、鼠标的位置等。

以下是一个鼠标点击事件对象的示例：

function handleClick(event) {
  console.log(event.type); // 'click'
  console.log(event.target); // the element that was clicked on
  console.log(event.clientX); // the x coordinate of the mouse pointer when the event occurred
  console.log(event.clientY); // the y coordinate of the mouse pointer when the event occurred
}

示例1 - 点击按钮时改变背景颜色

<button id="myBtn">Change Color</button>

const button = document.getElementById('myBtn');
button.addEventListener('click', function(event) {
  document.body.style.background = 'green';
});

点击按钮后，网页的背景色会改变为绿色。

示例2 - 阻止浏览器默认行为

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

const link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
  event.preventDefault();
  alert('Link clicked!');
});

点击链接后，会弹出一个提示框，同时不会跳转到百度网站。可以看到，我们在事件处理程序内部使用了 preventDefault() 方法来阻止默认行为的发生。