JavaScrip事件对象Event详解

基本概念

在触发Dom上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。

Dom中的事件对象

通过HTML、Dom0级或Dom2级指定事件处理程序时，兼容Dom的浏览器会将一个event事件对象传入到事件处理程序中，也就是说event是作为函数内部的一个对象在使用，外部无法访问到。

例子：

HTML事件处理程序

<button onclick='console.log(event.type)'>OK</button>
//输出：click

Dom0级事件处理程序

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
btn.onclick = function() {
    console.log(event.type);
};
//输出：click

Dom2级事件处理程序

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    console.log(event.type);
});
//输出：click

触发的事件类型不一样，event事件对象可用的属性和方法也不一样。例如鼠标操作导致的事件中，会包含鼠标位置信息，而键盘操作导致的事件中，会包含与按下的键有关的信息。

下面重点讲解四个所有事件都会有的属性和方法：

①   currentTarget与Target

在事件处理程序内部，currentTarget指向绑定事件处理程序的那个元素，对象this始终等于currentTarget的值。而Target则只包含事件的实际目标。

例子：

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
document.body.addEventListener('click', function(e) {
    console.log(e.currentTarget === document.body); //输出：true
    console.log(this === e.currentTarget); //输出：true
    console.log(e.target === btn); //输出：true
    console.log(this === e.target); //输出：false
});

如果直接将事件处理程序指定给了目标元素，则currentTarget、target和this包含相同的值。

例子：

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
btn.addEventListener('click', function(e) {
    console.log(e.currentTarget === btn); //输出：true
    console.log(e.target === btn); //输出：true
    console.log(this === btn); //输出：true
});

②   要阻止特定事件的默认行为，例如链接被单击的默认行为是跳转到指定的UR，如果想阻止链接的这一默认行为，可以使用preventDefault()方法。

例子：

<a href='https://www.imooc.com/' id='link'>慕课网</a>

var link = document.getElementById('link');
link.addEventListener('click', function() {
    event.preventDefault();
});

③   stopPropagation()方法用于立即停止事件在Dom层次中的传播，即取消进一步的事件捕获或冒泡。**

例子：

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
document.body.addEventListener('click', function() {
    console.log('body'); //输出：事件冒泡被阻止，没有输出
});
btn.addEventListener('click', function() {
    console.log('btn'); //输出：btn　　
    event.stopPropagation();
});

IE中的事件对象

使用Dom0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

例子：

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
btn.onclick = function() {
    var event = window.event;
    alert(event.type);
};
//输出：click

使用attachEvent()方法或是通过HTML属性指定的事件处理程序，event事件对象作为参数被传入事件处理程序中。

例子：

<button id='btn'>OK</button>

var btn = document.getElementById('btn');
btn.attachEvent('onclick', function() {
    alert(event.type);
});
//输出：click

也可以通过window对象来访问event对象。

例子：

<button id='btn'>OK</button>

var btn=document.getElementById('btn')
btn.attachEvent('onclick',function(){
    alert(window.event.type==event.type);
})
//输出：true

IE中的event事件对象所有事件都会有的属性和方法：

1. srcElement：等同于Dom中事件对象的属性Target；

2. returnValue=false：等同于Dom中事件对象的方法preventDefault()；

3. cancelBubble=true：等同于Dom中事件对象的方法stopPropagation()；

文章重点

 基于Dom和IE中的event对象的不同，需要拿出一个跨浏览器的方案。

代码如下：

var EventUtil = {
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault()
        } else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

----------

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。