触发事件.md

触发事件

在 JavaScript 中有几种方法可以触发事件，具体取决于要触发事件的元素类型和事件类型。

• click() 方法只能用于触发 click 事件。通过调用该方法可以模拟用户点击按钮的行为。

// 对于任何元素
ele.click()

• reset() 方法触发表单的重置事件，而 submit() 方法触发表单的提交事件。

// 对于表单元素
formEle.reset()
formEle.submit()

• focus() 和 blur() 方法分别可以用来触发 focus 和 blur 事件。

// 用于文本框和文本区域
ele.focus()
ele.blur()

触发原生事件

dispatchEvent() 方法允许在指定元素上触发一个事件。需要传递一个事件对象作为参数。

const trigger = function (ele, eventName) {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(eventName, true, false)
  ele.dispatchEvent(e)
}

你可以触发 change、keyup、mousedown 以及更多的调用。

trigger(ele, 'mousedown')

触发自定义事件

下面的示例代码触发了一个以 hello 命名的自定义事件传递 { message: 'Hello World' }：

const e = document.createEvent('CustomEvent')
e.initCustomEvent('hello', true, true, { message: 'Hello World' })

// 触发事件
ele.dispatchEvent(e)

更新：不在建议使用 document.createEvent 来创建自定义事件，它的很多方法已经废弃，例如以上示例的 initCustomEvent 方法。

推荐阅读：JavaScript 中的自定义事件