js高程事件通识篇（2）

前言

通过上一篇文章，我们了解到了dom事件流，以及事件的处理程序，那么本文带大家了解下dom事件本身，在我们定义一个事件时，这个事件具有很多属性，基于这个属性得到的内容，我们可以进行下一步的逻辑操作。

初识dom级事件对象

废话不多说，我们直接在codepen的案例中定义一个点击事件，然后看其返回的内容进行分析学习。

codepen事件学习地址

<div id="app">
  <div class="container" id="container">
    <button  id="button">点击</button>
    <div id="text">
    </div>  
  </div>
</div>
// javascript
let body = document.getElementById('container');
let button = document.getElementById('button');
body.addEventListener("click",function(event){
  console.log('bodyevent'+event);
  console.log(this);
})
button.addEventListener("click",function(event){
  debugger
  console.log('buttonevent'+event);
  console.log(this);
 
})
复制代码

通过基本的debugger我们可以看到event的全部属性，以及可以使用的方法。我们也会看到默认的dom2级事件流，去掉了捕获阶段的事件触发，虽然我们触发的是按钮，但触发了两次事件，分别是按钮自己的和父元素的。

dom2级重要的事件对象属性

属性	分类	作用
x,y;pageX,pageY,clientX,clientY,offsetX,offsetY,screenX,screenY	触发事件的位置信息	主要描述其触发事件的位置，在拖动时非常实用
type	触发事件的类型信息	重要的类型信息，一般会根据不同的类型定义不同的交互，最常见的就是click类型，只读类型，除此之外还有鼠标的事件等，一般与我们追加时的事件名是相同的。
target,currentTarget	目标对象	其中target始终指向的是实际触发事件的对象，而currentTarget指的是事件监听的对象，其中this的指向永远和添加事件监听的对象是一致的。所以一般情况下我们获取对象是用的event.target,如果你想直接使用this，那么要把事件添加到直接的事件对象上才可以。
bubbles, cancelable	事件属性	当值为true的时候，可以调用下面的方法分别进行取消，否则无法操作
stopPropagation(),preventDefault()	事件方法属性	分别可以用来阻止冒泡，以及阻止默认事件

备注：事件对象只存在于事件发生期间，一旦程序执行完成，事件对象就会销毁。

ie的事件对象属性

大部分属性是相同的，取到事件对象的方法取决于如何定义的事件。如果是dom0级的，在ie中的方法是通过window.event方式；如果是attachEvent,那么要用event.

其中事件的不同也会导致属性的不同，但基本的属性是不变的。

属性	分类	作用
cancelBubble	读写属性	是否可以阻止捕获或者冒泡属性.默认是false，需要阻止设置为true
type	触发事件的类型信息	重要的类型信息，一般会根据不同的类型定义不同的交互
returnValue	读写属性，事件属性	是否可以取消默认行为。默认为true,需要阻止，设置为false
srcElement	目标对象,只读	与target相同

因为定义的方式不同，所以不能始终认为this会等于目标对象。所以会根据你添加的方式来确定其获取目标元素的方法。

如果是dom0级的，那么需要用window.event.srcElement,如果是attachEvent，那么要用event.srcElement

在ie中取消默认事件和冒泡事件直接设置其对应的值为false即可。

兼容的事件对象写法

那么我们还是一如既往的可以利用外观模式设计兼容的事件方法。

let eventUtil = {
    getEvent:function(event){
        return event || window.event
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    }
}
复制代码

找寻vue中的事件处理源码

如果你想直接定位到有关的事件处理的部分，请直接看这个文件，vue最终还是将事件追加到html标签元素的，所以其关联的vm的event还是通过addEventListener ，以及removeEventListener移除的。文件地址： runtime-event.js
如果你想了解vue有关的虚拟dom是如何给节点追加事件，其四个基本指令， $on,$ off, $once,$ emit如何实现的，可以查看这个源文件:vue-core-instance-events.js
如果你想深入了解vue在给虚拟dom添加事件属性后如何进行编译，可以参考下这篇深入vuejs探秘的文章：vuejs技术揭秘