Event 介绍

鲁迅曾经说过，要想DOM玩的好，Event事件不可少。在开发中不可能不遇到不跟事件的打交道的场景，如果有，就当我没说。常用的比如触发一个键盘回车事件、鼠标点击事件、自定义事件等….

事件属性

上图就是事件的全家桶，代表web中有哪些事件，第二张图代表事件的属性，所有的事件对象所初始化需要的属性都是继承于Event,当然不同的事件所需要的属性不一样，常用的也就鼠标事件和键盘事件。其他不是没用，只是用的少，就跟现在手机上的红外线功能一样，我可以不用，但是你不能没有。

createEvent 手动触发

> 这是domcument 提供的一个方法用于创建一个事件

作用：用于创建事件
eventType:上图的那些类型
返回值：新创建的 Event 对象，具有指定的类型。
随之必须调用自身的 init 方法进行初始化。
参考地址

1. click事件案例

话不多说，直接看代码

 <body>
  <button type="button" id="testBtn">你点下逝世</button>
 </body>
 testBtn.addEventListener('click',function(e){
  console.log('手动触发！',e)
 })
     var myEvent = document.createEvent("MouseEvent");
         // 自定义事件回调函数的参数
         myEvent.data = {
             msg: '王某'
         }
     myEvent.initMouseEvent('click', true, false)
     testBtn.dispatchEvent(myEvent)
复制代码

运行结果:

上图的event为 MouseEvent 事件对象，打印出来有很多属性，有些event 事件事没有这么多的。

2. 键盘回车事件

 testBtn.addEventListener('keydown',function(e){
  console.log('键盘事件',e)
 })
     var myEvent = document.createEvent("KeyboardEvent");
         // 自定义事件回调函数的参数
         myEvent.data = {
             msg: '王某'
         }
     myEvent.initKeyboardEvent('keydown', true, false,document.view,13,13,13,false,false) // 13代表回车
  testBtn.dispatchEvent(myEvent)
复制代码

之前初始化键盘事件也可用 initKeyEvent 在最新的DOM3 级事件标准中已经废弃。

但是使用 initKeyboardEvent 初始化按照MDN上的语法进行初始化发现

返回的事件属性里的keyCode 里不是设置好的13 一直是0 有猫病。

难道是不同浏览器有差异吗？

UIEvent 触发事件

UIEvent 接口表示简单的用户界面事件。(MouseEvent, TouchEvent, FocusEvent, KeyboardEvent, WheelEvent, InputEvent)

其实用上面的document.createEvent(‘UIEvent’) 也是可以的，它更像是一些常用事件的简称

1.手动触发click

   var myEvent = document.createEvent("UIEvent");
         // 自定义事件回调函数的参数
         myEvent.data = {
             msg: '王某'
         }
     myEvent.initUIEvent('click', true, false)
  testBtn.dispatchEvent(myEvent)
复制代码

 let ev = new UIEvent('click', {
         bubbles: true,
         cancelable: true,
         view: window,
     })   UIEvent 接口表示简单的用户界面事件。
  testBtn.dispatchEvent(ev)
复制代码

第二个参数就是上面继承Event 需要的属性

Event触发事件

其他很多事件都是由Event派生出来，其本身也是个构造函数，可以返回一个event对象用于触发事件

 let event = new Event('click',{"bubbles":true, "cancelable":false})
 testBtn.dispatchEvent(event)
复制代码

以上三个触发事件的方式：

第一个每次创建后都需要进行相应的init 初始化操作，
第二三个不需要，但是返回的是不同的事件对象，分别也是有不同的属性，只不过大部分也是继承了event属性。

第一个事件对象为uiEvent 返回
第二个为document.creteEvent(‘KeyboardEvent’)

对应事件触发

对于KeyboardEvent 键盘事件，由于有时候需要触发指定的案件，比如回车，但是以上都是基于event 的，返回的对象里没有keycode字段，用document.creteEvent的方式，设置了貌似也没生效，所有我们可以直接初始化对应的事件来触发。

KeyboardEvent

     var evt = new KeyboardEvent('keydown', { // 键盘事件
         bubbles: true,
         key:13,
         keyCode:13,
         cancelable: true,
         view: window,
     });
复制代码

图片[3]-你怎么这么多…事件-一一网
第一个键盘事件对象由document.createEvent(‘KeyboardEvent’) 触发设置了keycode 但是没有效果
第二个是直接实例化一个KeyboardEvent对象进行设置，返回的keycode里由对应的值，也触发了回车事件。

自定义事件触发

利用Event 可以触发我们自定义的事件

document.addEventListener('Good',function (e) {
            console.log(e)
            console.log(`我被触发了，${e.data.msg}`);
        },true);
let myEvent = new Event('Good',{"bubbles":true, "cancelable":false})
  myEvent.data = {
            msg: '王某F'
         }
  document.dispatchEvent(myEvent)
复制代码

利用HTMLEvents

  var myEvent = document.createEvent("HTMLEvents");
          // 自定义事件回调函数的参数
          myEvent.data = {
              msg: '王某'
          }
      myEvent.initEvent('GoodNight', true, false) // 13代表回车
   document.dispatchEvent(myEvent)
复制代码

总结

event 为所有事件的一个基类，不管是UIEvent mouseEvent 还是keycodeEvent 都是它的后代
document.createEvent() 第一个参数就是基于event的事件类型，这种方式创建的必须进行初始化
对于需要设置具体参数的事件，可以直接new 实例化进行创建事件对象

文章版权归作者所有，未经允许请勿转载。

THE END

前端