实现一个函数 trigger(element, event)，触发 DOM 元素上的事件

推荐答案

function trigger(element, event) {
    if (typeof element.dispatchEvent === 'function') {
        const evt = new Event(event, { bubbles: true, cancelable: true });
        element.dispatchEvent(evt);
    } else {
        throw new Error('The provided element does not support dispatchEvent');
    }
}

本题详细解读

1. 函数功能

trigger 函数的作用是触发指定 DOM 元素上的特定事件。这个函数接受两个参数：

• element: 需要触发事件的 DOM 元素。
• event: 需要触发的事件名称（例如 'click', 'focus' 等）。

2. 实现细节

• element.dispatchEvent: 这是 DOM 元素的一个方法，用于触发指定的事件。我们首先检查 element 是否支持 dispatchEvent 方法，以确保它是一个有效的 DOM 元素。

• new Event(event, { bubbles: true, cancelable: true }): 这里我们创建了一个新的 Event 对象。event 参数指定了事件的类型（如 'click'）。bubbles: true 表示事件会冒泡，cancelable: true 表示事件可以被取消。

• element.dispatchEvent(evt): 最后，我们使用 dispatchEvent 方法将创建的事件对象 evt 分派到 element 上，从而触发该事件。

3. 错误处理

如果传入的 element 不支持 dispatchEvent 方法（例如传入了一个非 DOM 元素），函数会抛出一个错误，提示用户提供的元素不支持事件触发。

4. 使用示例

const button = document.querySelector('button');
trigger(button, 'click'); // 触发按钮的点击事件

这个函数可以用于自动化测试、模拟用户交互等场景。