js-事件触发器

dispatchEvent

事件触发器，字面上理解就是触发事件的，通常情况下，事件都是由用户在页面上的实际操作来触发的，比如鼠标点击，键盘按下等，但是也有一些事件，需要程序自定义实现。

对于实现事件触发器，浏览器都有原生的方法来支持，但是在兼容性上又有很大的出入，如下

  var fireEvent = function fireEvent(element,event){
    if (document.createEventObject){
      // IE浏览器支持fireEvent方法
      var evt = document.createEventObject();
      return element.fireEvent('on'+event,evt)
    }
    else{
      // 其他标准浏览器使用dispatchEvent方法
      var evt = document.createEvent( 'HTMLEvents' );
      // initEvent接受3个参数：
      // 事件类型，是否冒泡，是否阻止浏览器的默认行为
      evt.initEvent(event, true, true);
      return !element.dispatchEvent(evt);
    }
  };

非IE浏览器中，自定义事件使用createEvent()创建事件对象，使用initEvent()初始化事件对象，使用dispatchEvent()方法触发事件

 <script type="text/javascript">      
      /* 创建一个事件对象，名字为evt，类型为HTMLEvent */
      var evt = document.createEvent("HTMLEvents");
  
      /* 
       * 初始化事件对象
       * 第一个参数：事件类型（就好像是click还是submit）
       * 第二个参数：是否冒泡
       * 第三个参数：是否阻止浏览器默认行为（例如阻止submit事件提交表单）
      */
     evt.initEvent("click",true,true);
         
     /* 给自定义事件对象的属性赋值。这个属性一开始不存在，我们这里将其实例化了 */
     evt.name = "name";
         
     /* 
      * 将自定义事件绑定在document上，你也可以绑定到指定元素上。
      * 这里要注意：第一个参数要和上面initEvent()的第一个参数一致，否则无法触发这个事件以及获取evt中的一些属性（比如这里的newEvent.name）。
     */
     document.addEventListener("click",function() {
         alert("自定义事件的name属性：" + evt.name);
     },false);
 
     /* 触发自定义事件 */
     document.dispatchEvent(evt);  
 </script>  

详解：

1）createEvent()——创建自定义对象

创建一个指定类型的对象，返回的对象必须先初始化(比如使用initEvent()),然后才可以用dispatchEvent()触发

var event = careateEvent(type);

type：创建事件对象的类型，可以创建"UIEvents"（UI事件，用于触摸屏设备）、“MouseEvents”（鼠标事件）、“MutationEvents”（DOM结构发生改变触发的事件）、“HTMLEvents”（HTML事件？），在这里得知以前还可以指定类型为"Event"。

2）initEvent()——初始化自定义事件对象

此方法已从web标准中删除了，目前虽然还可继续使用，未来可能会删除此方法

event.initEvent(type, bubbles, cancalable);

type：初始化事件对象的类型，传递一个字符串类型的参数。这里的事件类型指的是类似点击事件（click）、加载事件（load）、提交事件（submit）等等这种类型，当然你也可以自定义一个名字，这样用户就不能通过交互去触发这个事件了。如果你这里设置的是"click"，初始化后你也可以通过点击去触发这个事件。

在绑定事件的时候要注意：绑定事件的事件类型（addEventListener()的第一个参数）要和这个事件类型一致，不然无法触发事件。

bubbles：该事件是否会冒泡，传递一个布尔型的参数。设置为true表示该事件支持冒泡，为false表示不支持冒泡。设置该参数会影响到Event.bubbles（事件是否支持冒泡）的值。

cancalable：该事件的默认动作是否可以取消，传递一个布尔型的参数。设置为true表示可以取消默认动作，为false表示不可以取消默认动作。设置该参数会影响到Event.cancalable（是否可以取消默认行为）的值。

上面说过初始化事件已在web标准中删除，替代的新写法如下

    /**
     * type 事件名称
     * options 表示事件对象的配置,有如下两个属性：
     *    1)bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
     *    2)cancelable：布尔值，可选，默认为false，表示事件是否可以被取消,即能否用Event.preventDefault()取消这个事件
     *                一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为
     *
     */
    let event = new Event(type, options);
    
    // 新建一个look的事件实例
    var ev = new Event('input',
      {
        'bubbles': true,
        'cancelable': false
      }
    );
    document.dispatchEvent(ev);

参考文章：

https://blog.csdn.net/weixin_42192113/article/details/119353170

https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091190&idx=4&sn=392e61aa1931a911fe19955d423e9c43&chksm=be5bcbdb892c42cd2abd0b2796a78807faf64dcc9be6792cff7d4ff8c1b526680e46d095eea5&scene=27