JavaScript-事件对象

Posted on by mannuan 2 mins read

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

  • 事件的元素
  • 事件的类型
  • 其它与事件相关的信息

所有浏览器都支持event对象，但存在差异。

event对象在标准的现代浏览器中会作为参数传入到事件的事件处理函数。

DOM中的事件对象

属性/方法 类型 读写 说明
bubbles Boolean 只读 表明事件是否支持冒泡
cancelable Boolean 只读 表明是否可以取消默认行为
currentTarget Element 只读 表明事件处理程序当前正在处理事件的那个元素
defaultPrevented Boolean 只读 为true表示已经调用了下面的preventDefault()
detail Int 只读 与事件相关的细节信息
eventPhase Int 只读 触发事件处理程序的阶段：1表示捕获，2表示处于目标，3表示冒泡
preventDefault() Function —— 取消事件的默认行为，前提条件是cancelable属性为true
stopImmediatePropagation() Function —— 取消事件的进一步捕获或冒泡，同时阻止任何（其他的）事件处理程序被调用
stopPropagation() Function —— 立即停止事件在DOM中的传播，取消进一步的时间捕获或冒泡，前提条件是：bubbles属性为true
target Element 只读 事件的目标元素
trusted Boolean 只读 为true表示是浏览器生成的，为false表示是开发人员自定义的事件
type String 只读 被触发的事件类型
view AbstractView 只读 与事件相关的抽象视图，等于发生事件的window对象

  1. 在HTML事件处理程序时：变量event（固定）中保存着event对象，无需主动声明，也无需以参数形式传入：

  2. 在DOM 0 级和DOM 2 级事件处理程序中，event对象会 以参数的形式传入事件处理函数 中；

  3. event对象的基本属性和方法见上面的表格，各个不同类型的事件扩展的属性和方法各不相同；

  4. 在事件处理程序内部，对象this的值始终等于currentTarget的值；

target属性是（同心圆）靶心，this和currentTarget是你击中的最大点数环（同心圆）；

  1. target是事件在DOM同心圆蔓延的终点；

  2. stopPropagation()用法实例：

var btn = document.getElementById('myBtn');

btn.onclick = function(event){
    alert('clicked!');
    event.stopPropagation();
}

document.body.onclick = function(event){
    alert('body clicked');
}

  1. 只有在eventPhase为2（目标阶段时）this=currentTarget和target才相等；

  2. 只有在事件处理程序执行期间，event对象才存在，一旦事件处理程序执行完毕，event对象就会被销毁。

IE中的事件对象

属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 表示是否（默认否）取消事件冒泡（类似DOM中的stopPropagation()方法）
returnValue Boolean 读/写 设为false表示取消事件的默认行为（类似DOM中的preventDefault）
srcElement Element 只读 事件的目标元素（类似DOM中的target属性）
type String 只读 被触发的事件类型
  1. IE中访问event对象的方式与现代浏览器DOM中访问event对象的方式不同；
  2. IE下的DOM 0 级事件：event对象作为window对象的一个属性存在，而不用将event作为处理函数的参数传入:
var btn = getElement('#myBtn');

btn.onclick = function(){
    var event = window.event;
    alert(event.type);  // 'click'
}
  1. HTML特性指定事件处理程序时，在处理函数中直接通过一个event变量访问event对象；
  2. attachEvent()指定事件处理程序时，访问event对象有两种方法：

event对象作为window对象的属性被访问；

event对象作为参数传入事件处理函数

  1. 低版本IE不支持事件捕获，只支持事件冒泡；使用cancelBubble = true可以阻止事件继续冒泡：
var btn = document.getElementById('myBtn');

btn.onclick = function(event){
    alert('clicked');
    window.event.cancelBubble = true;
}

document.body.onclick = function(event){
    alert('body clicked');
}

// DOM 0 级事件是冒泡阶段触发，所以此例中body上的绑定事件无法有btn上的click冒泡触发

跨浏览器的事件对象

var eventUtil = {
    addEventHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },

    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;
        }
    },

    removeEventHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    }
};

由于IE不支持事件捕获，因此以上浏览器的事件对象中的preventDefault()只能阻止事件冒泡！