DOM中的event对象详解 — 第13.3.1节

理解事件对象

追根溯源事件对象，才发现自己会的微不足道！

  在触发DOM的事件的时候，浏览器会默认产生一个event对象，这个对象包含了所有与该事件有关的信息，比如：鼠标点击页面的某个按钮会让事件对象中包含对象的节点、鼠标的位置….等信息。
一：对于直接在html里写入的事件，通过变量event来输出event对象：

<input type="button" value="按钮3" onmouseover="console.log(event)">

二：event对象有是什么呢？不要怕，慢慢来看：

三：this、e.target和e.currentTarget的区别
在事件处理程序的内部，对象this始终等于currentTarget，而target则只包含事件的实际目标。
公共代码：

<input type="button" value="点击1" id="mybtn1">
<input type="button" value="点击2" id="mybtn2">
<input type="button" value="点击4" id="mybtn4">
<a href="http://www.baidu.com" id="mybtn3">百度</a>

情况一：直接将事件处理程序指定给目标（两者相等）

    btn.addEventListener('mouseover',function(e){
        console.log(e)
        console.log(e.type);         //mouseover
        console.log(e.currentTarget);//<input type="button" value="点击" id="mybtn">
        console.log(e.target);       //<input type="button" value="点击" id="mybtn">
    },false);

情况二：事件处理程序指定在按钮的父节点中（两者不相等）

    document.body.onclick = function(e){
        console.log(this);          //body...</body>
        console.log(e.currentTarget);//body...</body>
        console.log(e.target);      //<div id="mybtn2"></div>
    }

总结各个情况：当eventPhase等于2的时候，this、target和currentTarget始终是相等的,其余别的情况，两者不相等。

btn4.onclick = function(e){
    console.log(e.eventPhase);  //2
}
document.body.addEventListener('click',function(e){
    console.log(e.eventPhase);  //1
},true);
document.body.onclick = function(e){
    console.log(e.eventPhase);  //3
}

四：一个函数处理多个事件的方法？

var handler = function(event){
    switch(event.type){
        case 'click':
            alert('clicked');
            break;
        case 'mouseover':
            event.target.style.backgroundColor = 'red';
            break;
        case 'mouseout':
            event.target.style.backgroundColor = '';
            break;
    }
};
btn1.onclick = handler;
btn2.onmouseover = handler;
btn2.onmouseout = handler;

五：stopPropagation和preventDefault用法

//stopPropagation取消事件进一步捕获或者冒泡
//preventDefault取消事件默认行为
//defaultPrevented的值为true的时候表示调用了preventDefault()方法
btn3.onclick = function(e){
    alert('click');
    e.stopPropagation();
    e.preventDefault();
    console.log(e.defaultPrevented);//true
}
document.body.onclick = function(e){
    alert('Body Clicked');
}

只有在事件处理程序执行的时候，event才会被创建，处理程序执行完成的时候event被销毁