小白速成JS之路：掌握事件对象e(event)，开启交互之旅

前端

2023-04-19 13:10:52

揭秘事件对象 e：解锁交互式网页的钥匙

导语：
欢迎来到交互式网页设计的精彩世界！事件对象 e 是 JavaScript 中的一块基石，它掌控着用户与网页之间的关键信息。了解它将赋予你前所未有的力量，让你的网页栩栩如生，响应用户的每一个动作。

事件对象 e 的宝库

事件对象 e 就像一艘装满交互信息的船。它承载着有关事件的方方面面，从事件类型到触发事件的元素，应有尽有。以下是几个至关重要的属性和方法：

type： 事件类型，例如 "click"、"mouseover" 或 "keydown"。
target： 触发事件的元素，也就是事件的源头。
currentTarget： 当前元素，即附加事件处理函数的元素。
preventDefault： 阻止事件的默认行为，例如取消表单提交。
stopPropagation： 阻止事件在 DOM 树中向上冒泡。

倾听用户的心声：事件处理函数

事件处理函数是与用户互动的桥梁。它们可以是行内代码，也可以是使用 addEventListener() 方法添加的事件监听器。使用这些函数，你可以将代码与特定的事件联系起来，从而对用户的操作做出响应。

示例：

// 行内代码
<button onclick="alert('你好，世界！')">点我</button>

// 事件监听器
const button = document.getElementById('button');
button.addEventListener('click', function() {
  alert('你好，世界！');
});

优化交互：事件委托

当网页上的元素数量激增时，为每个元素单独添加事件处理函数会变得笨拙且低效。事件委托提供了一种巧妙的解决方案。它允许你为父元素添加一个事件监听器，然后通过事件冒泡来处理子元素的事件。

示例：

// 事件委托
const parent = document.getElementById('parent');
parent.addEventListener('click', function(e) {
  const target = e.target;
  if (target.classList.contains('child')) {
    // 处理子元素的点击事件
  }
});