js手动触发事件

2021-05-2093次阅读javascript原生Js

EventTarget.dispatchEvent向一个指定的事件目标派发一个事件, 并以合适的顺序同步调用目标元素相关的事件处理函数。标准事件处理规则(包括事件捕获和可选的冒泡过程)同样适用于通过手动的使用dispatchEvent()方法派发的事件。

语法

cancelled = !target.dispatchEvent(event)

参数

  • event 是要被派发的事件对象。
  • target 被用来初始化事件和决定将会触发目标.

返回值

当该事件是可取消的(cancelable为true)并且至少一个该事件的 事件处理方法 调用了Event.preventDefault(),则返回值为false;否则返回true。
如果该被派发的事件的事件类型(event's type)在方法调用之前没有被经过初始化被指定,就会抛出一个 UNSPECIFIED_EVENT_TYPE_ERR 异常,或者如果事件类型是null或一个空字符串. event handler 就会抛出未捕获的异常; 这些 event handlers 运行在一个嵌套的调用栈中: 他们会阻塞调用直到他们处理完毕,但是异常不会冒泡。

注意

与浏览器原生事件不同,原生事件是由DOM派发的,并通过event loop异步调用事件处理程序,而dispatchEvent()则是同步调用事件处理程序。在调用dispatchEvent()后,所有监听该事件的事件处理程序将在代码继续前执行并返回。
dispatchEvent()是create-init-dispatch过程的最后一步,用于将事件调度到实现的事件模型中。可以使用Event构造函数来创建事件。

//手动触发change事件
input.dispatchEvent(new CustomEvent('change'));

 

CustomEvent创建一个新的 CustomEvent 对象

 

构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。

语法

event = new CustomEvent(typeArg, customEventInit);

参数

  • typeArg 一个表示 event 名字的字符串
  • customEventInit 可选
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);

 

上一篇: IE浏览器下Promise兼容性处理  下一篇: peerDependencies指定所需要兼容的宿主包的版本  

js手动触发事件相关文章