JavaScript 中如何处理 DOM 事件？

推荐答案

在 JavaScript 中，处理 DOM 事件通常涉及以下几个步骤：

1. 选择目标元素：使用 document.querySelector 或 document.getElementById 等方法选择需要绑定事件的 DOM 元素。

2. 绑定事件监听器：使用 addEventListener 方法为选定的元素绑定事件监听器。该方法接受三个参数：

   • 事件类型（如 'click'、'mouseover' 等）
   • 事件处理函数（回调函数）
   • 可选参数（如 { once: true } 表示事件只触发一次）

3. 编写事件处理函数：在事件处理函数中编写逻辑代码，处理事件触发时的行为。

4. 移除事件监听器（可选）：如果需要，可以使用 removeEventListener 方法移除事件监听器。

示例代码：

// www.javascriptcn.com code example
// 选择目标元素
const button = document.querySelector('#myButton');

// 定义事件处理函数
function handleClick(event) {
    console.log('Button clicked!');
}

// 绑定事件监听器
button.addEventListener('click', handleClick);

// 可选：移除事件监听器
// button.removeEventListener('click', handleClick);

本题详细解读

1. 选择目标元素

在 JavaScript 中，处理 DOM 事件的第一步是选择需要绑定事件的元素。常用的方法有：

• document.querySelector(selector)：返回文档中匹配指定 CSS 选择器的第一个元素。
• document.getElementById(id)：返回具有指定 ID 的元素。
• document.getElementsByClassName(className)：返回包含指定类名的所有元素的集合。
• document.getElementsByTagName(tagName)：返回包含指定标签名的所有元素的集合。

2. 绑定事件监听器

addEventListener 是 JavaScript 中用于绑定事件监听器的主要方法。它的语法如下：

element.addEventListener(eventType, callback, options);

• eventType：表示事件类型的字符串，如 'click'、'mouseover'、'keydown' 等。
• callback：事件触发时执行的回调函数。该函数接收一个 event 对象作为参数，包含了事件的相关信息。
• options：可选参数，可以是一个布尔值或对象。常见的选项包括：
  • capture：布尔值，表示事件是否在捕获阶段触发。
  • once：布尔值，表示事件是否只触发一次。
  • passive：布尔值，表示事件处理函数是否永远不会调用 preventDefault()。

3. 编写事件处理函数

事件处理函数是事件触发时执行的代码块。它接收一个 event 对象作为参数，可以通过该对象访问事件的相关信息，如事件类型、目标元素、鼠标位置等。

function handleClick(event) {
    console.log('Event type:', event.type);
    console.log('Target element:', event.target);
}

4. 移除事件监听器

在某些情况下，可能需要移除事件监听器。可以使用 removeEventListener 方法，其语法与 addEventListener 类似：

element.removeEventListener(eventType, callback);

需要注意的是，removeEventListener 必须使用与 addEventListener 相同的参数，包括事件类型和回调函数。

5. 事件委托

事件委托是一种优化事件处理的技术，通过将事件监听器绑定到父元素上，利用事件冒泡机制来处理子元素的事件。这种方法可以减少事件监听器的数量，提高性能。

document.querySelector('#parent').addEventListener('click', function(event) {
    if (event.target.matches('.child')) {
        console.log('Child element clicked!');
    }
});

6. 事件对象

事件处理函数接收的 event 对象包含了事件的相关信息。常见的属性和方法包括：

• event.type：事件类型（如 'click'）。
• event.target：触发事件的元素。
• event.currentTarget：绑定事件监听器的元素。
• event.preventDefault()：阻止事件的默认行为。
• event.stopPropagation()：阻止事件冒泡。

7. 事件冒泡与捕获

DOM 事件传播分为三个阶段：

1. 捕获阶段：事件从文档根节点向下传播到目标元素。
2. 目标阶段：事件到达目标元素。
3. 冒泡阶段：事件从目标元素向上冒泡到文档根节点。

可以通过 addEventListener 的 capture 选项来控制事件是在捕获阶段还是冒泡阶段触发。

element.addEventListener('click', handleClick, true); // 捕获阶段触发
element.addEventListener('click', handleClick, false); // 冒泡阶段触发（默认）

8. 常见事件类型

JavaScript 支持多种事件类型，常见的有：

• 鼠标事件：click、dblclick、mouseover、mouseout、mousedown、mouseup 等。
• 键盘事件：keydown、keyup、keypress 等。
• 表单事件：submit、change、focus、blur 等。
• 窗口事件：load、resize、scroll 等。

9. 事件处理中的 this

在事件处理函数中，this 通常指向绑定事件的元素。可以通过 event.currentTarget 访问相同的元素。

button.addEventListener('click', function(event) {
    console.log(this === event.currentTarget); // true
});

10. 事件处理中的 event.preventDefault()

某些事件具有默认行为，如点击链接会跳转页面，提交表单会刷新页面。可以通过 event.preventDefault() 阻止这些默认行为。

link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Link click prevented');
});

11. 事件处理中的 event.stopPropagation()

事件冒泡可能会导致多个事件处理函数被触发。可以通过 event.stopPropagation() 阻止事件冒泡。

child.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('Child click, propagation stopped');
});

parent.addEventListener('click', function() {
    console.log('Parent click'); // 不会触发
});

12. 事件处理中的 event.stopImmediatePropagation()

如果一个元素绑定了多个事件监听器，event.stopImmediatePropagation() 可以阻止后续事件监听器的执行。

button.addEventListener('click', function(event) {
    event.stopImmediatePropagation();
    console.log('First listener');
});

button.addEventListener('click', function() {
    console.log('Second listener'); // 不会触发
});

13. 事件处理中的 event.target 与 event.currentTarget

• event.target 是触发事件的元素。
• event.currentTarget 是绑定事件监听器的元素。

parent.addEventListener('click', function(event) {
    console.log('Target:', event.target); // 点击的子元素
    console.log('Current Target:', event.currentTarget); // 父元素
});

14. 事件处理中的 event.delegateTarget

在使用事件委托时，event.delegateTarget 可以访问绑定事件监听器的元素。

parent.addEventListener('click', function(event) {
    if (event.target.matches('.child')) {
        console.log('Delegate Target:', event.delegateTarget); // 父元素
    }
});

15. 事件处理中的 event.relatedTarget

对于某些事件（如 mouseover 和 mouseout），event.relatedTarget 可以访问与事件相关的其他元素。

element.addEventListener('mouseover', function(event) {
    console.log('Related Target:', event.relatedTarget); // 鼠标移出的元素
});

16. 事件处理中的 event.timeStamp

event.timeStamp 返回事件触发的时间戳，单位为毫秒。

element.addEventListener('click', function(event) {
    console.log('Time Stamp:', event.timeStamp);
});

17. 事件处理中的 event.isTrusted

event.isTrusted 返回一个布尔值，表示事件是否由用户触发（true）还是由脚本触发（false）。

element.addEventListener('click', function(event) {
    console.log('Is Trusted:', event.isTrusted);
});

18. 事件处理中的 event.composed

event.composed 返回一个布尔值，表示事件是否可以跨越 Shadow DOM 边界。

element.addEventListener('click', function(event) {
    console.log('Composed:', event.composed);
});

19. 事件处理中的 event.composedPath()

event.composedPath() 返回一个数组，表示事件传播路径上的所有元素。

element.addEventListener('click', function(event) {
    console.log('Composed Path:', event.composedPath());
});

20. 事件处理中的 event.initEvent()

event.initEvent() 用于初始化事件对象，但已被废弃，推荐使用 new Event() 或 new CustomEvent()。

const event = new Event('click', { bubbles: true, cancelable: true });
element.dispatchEvent(event);

21. 事件处理中的 event.dispatchEvent()

event.dispatchEvent() 用于手动触发事件。

const event = new Event('click');
element.dispatchEvent(event);

22. 事件处理中的 event.preventDefault() 与 event.returnValue

event.preventDefault() 和 event.returnValue = false 都可以阻止事件的默认行为，但 event.returnValue 已被废弃，推荐使用 event.preventDefault()。

element.addEventListener('click', function(event) {
    event.preventDefault();
    // event.returnValue = false; // 不推荐
});

23. 事件处理中的 event.stopPropagation() 与 event.cancelBubble

event.stopPropagation() 和 event.cancelBubble = true 都可以阻止事件冒泡，但 event.cancelBubble 已被废弃，推荐使用 event.stopPropagation()。

element.addEventListener('click', function(event) {
    event.stopPropagation();
    // event.cancelBubble = true; // 不推荐
});

24. 事件处理中的 event.stopImmediatePropagation() 与 event.cancelBubble

event.stopImmediatePropagation() 和 event.cancelBubble = true 都可以阻止事件冒泡，但 event.cancelBubble 已被废弃，推荐使用 event.stopImmediatePropagation()。

element.addEventListener('click', function(event) {
    event.stopImmediatePropagation();
    // event.cancelBubble = true; // 不推荐
});

25. 事件处理中的 event.initMouseEvent()

event.initMouseEvent() 用于初始化鼠标事件对象，但已被废弃，推荐使用 new MouseEvent()。

const event = new MouseEvent('click', { bubbles: true, cancelable: true });
element.dispatchEvent(event);

26. 事件处理中的 event.initKeyboardEvent()

event.initKeyboardEvent() 用于初始化键盘事件对象，但已被废弃，推荐使用 new KeyboardEvent()。

const event = new KeyboardEvent('keydown', { bubbles: true, cancelable: true });
element.dispatchEvent(event);

27. 事件处理中的 event.initUIEvent()

event.initUIEvent() 用于初始化 UI 事件对象，但已被废弃，推荐使用 new UIEvent()。

const event = new UIEvent('load', { bubbles: true, cancelable: true });
element.dispatchEvent(event);

28. 事件处理中的 event.initCustomEvent()

event.initCustomEvent() 用于初始化自定义事件对象，但已被废弃，推荐使用 new CustomEvent()。

const event = new CustomEvent('myEvent', { bubbles: true, cancelable: true });
element.dispatchEvent(event);

29. 事件处理中的 event.initEvent() 与 new Event()

event.initEvent() 已被废弃，推荐使用 new Event() 或 new CustomEvent()。

const event = new Event('click', { bubbles: true, cancelable: true });
element.dispatchEvent(event);

30. 事件处理中的 event.initEvent() 与 new CustomEvent()

event.initEvent() 已被废弃，推荐使用 new Event() 或 new CustomEvent()。

const event = new CustomEvent('myEvent', { bubbles: true, cancelable: true });
element.dispatchEvent(event);