JS之DOM篇事件模拟

事件是网页中某个特定的瞬间，通常由用户主动触发。但实际上也可以使用JavaScript触发特定的事件，这就是接下来要介绍的事件模拟

引入

假设现在有按钮一和按钮二两个按钮，按钮一绑定了特定监听函数，现在需要点击按钮二的时候也能触发按钮一的监听函数，可以这么做

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
btn1.onclick=function(){
  alert(1);
}
btn2.onclick = btn1.onclick;
</script>

btn2通过事件复制，拥有了同btn1一样的监听函数，因此点击btn2也可以弹出1。但是这种方式在DOM2级中是无效的

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
btn1.addEventListener('click',function(){alert(1);})
btn2.onclick = btn1.onclick;
</script>

点击btn2不会弹出1，因为监听函数没有成功复制。如果需要使用DOM2级模拟click事件，可以使用click()方法达到目的

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
btn1.addEventListener('click',function(){alert(1);})
btn2.onclick = function(){
  btn1.click();
}
</script>

click()方法可以完美模拟click事件，但是对于其他事件并没有相应的模拟方法，现在就需要用到下面要介绍的事件模拟了

事件模拟

事件模拟包括三个部分：创建事件、初始化事件和触发事件。通常情况下，初始化与创建事件一起进行，然后通过dispatchEvent()方法触发事件

createEvent()

使用document.createEvent(eventType)方法创建event对象，这个方法接收一个参数，表示要创建的事件类型的字符串

事件类型         
UIEvents        
MouseEvents     
MutationEvents  
HTMLEvents      
Event           
CustomEvent     
KeyboardEvent   

使用document.createEvent()创建事件之后，还需要使用与事件有关的信息对其进行初始化，每种不同类型的事件都有不同的初始化方法

事件类型         事件初始化方法
UIEvents        event.initUIEvent
MouseEvents     event.initMouseEvent
MutationEvents  event.initMutationEvent
HTMLEvents      event.initEvent
Event           event.initEvent
CustomEvent     event.initCustomEvent
KeyboardEvent   event.initKeyEvent

事件初始化方法的参数与event对象所包含的属性一一对应。其中，前4个参数对正确地激发事件至关重要，因为浏览器要用到这些参数；而剩下的所有参数只有在事件处理程序中才会用到

下面是event.initMouseEvent()方法的参数，它们与鼠标事件的event对象所包含的属性向对应

type(字符串):表示要触发的事件类型，例如"mouseover"

bubbles(布尔值):表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true

cancelable(布尔值):表示事件是否可以取消。为精确地模拟鼠标事件，应该把这个参数设置为crue

view(AbstractView):与事件关联的视图。这个参数几乎总是要设置为document.defaultView

detail(整数):与事件有关的详细信息。这个值一般只有事件处理程序使用，但通常都设置为0

screenx(整数):事件相对于屏幕的X坐标

screenY(整数):事件相对于屏幕的Y坐标

clientX(整数):事件相对于视口的X坐标

clientY(整数):事件相对于视口的Y坐标

ctrlKey(布尔值):表示是否按下Ctrl键。默认值为false

altkey(布尔值):表示是否按下了Alt键。默认值为false

shiftKey(布尔值):表示是否按下了Shift键。默认值为false

metaKey(布尔值):表示是否按下了Meta键。默认值为false

button(整数):表示按下了哪一个鼠标键。默认值为0

relatedTarget(对象):表示与事件相关的对象。这个参数只在模拟mouseover或mouseout时使用

下面通过两种方式来模拟mouseover事件

写法一： 使用MouseEvents事件类型模拟mouseover事件

function simulateMouseOver(obj) {
  // 创建
  var event = document.createEvent('MouseEvents');
  // 初始化
  event.initMouseEvent('mouseover',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
  // 派发
  obj.dispatchEvent(event);
}

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
  btn1.addEventListener('mouseover',function(){alert(1);})
  btn2.onmouseover = function(){
    simulateMouseOver(btn1);
  }
</script>

写法二： 使用Event事件类型模拟mouseover事件

function simulateMouseOver(obj) {
  // 创建
  var event = document.createEvent('Event');
  // 初始化
  event.initEvent('mouseover',true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
  // 派发
  obj.dispatchEvent(event);
}

<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
  btn1.addEventListener('mouseover',function(){alert(1);})
  btn2.onmouseover = function(){
    simulateMouseOver(btn1);
  }
</script>

以上两种写法的效果是一样的，当鼠标移入btn2会弹出1

自定义事件

自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件

要创建自定义事件，可以调用document.createEvent("CustomEvent")。该方法返回的对象有一个名为initCustomEvent()的方法，接收如下4个参数

type(字符串)：触发的自定义事件类型

bubbles(布尔值)：表示事件是否应该冒泡

cancelable(布尔值)：表示事件是否可以取消

detail(对象)：任意值，保存在event对象的detail属性中

<button id="btn">按钮</button>
<script>
  function customEvent(obj) {
    var event = document.createEvent('CustomEvent');
    event.initCustomEvent('changeColor', true, true, 'hello');
    obj.addEventListener('changeColor', function(event) {
      this.style.color = 'red';
      this.innerHTML = event.detail;
    })
    return event
  }

  btn.onclick = function() {
    this.dispatchEvent(customEvent(this))
  }
</script>