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级重要的事件对象属性

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

ie的事件对象属性

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

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

因为定义的方式不同，所以不能始终认为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;
        }
    }
}
复制代码