了解 EventObject 前,我们先来回顾下蛮荒时代的代码:


    document.onclick = function(ev) {
        ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        // more code
    };

如此熟悉又丑陋的代码,请先努力保持住喷涌而出的泪水,我们来再次认识下 ev 参数。

翻查 MSDN, 可以得知 ev 就是传说中的 event object. 这个对象因其兼容性问题而让开发者痛苦不堪。然而,抛开兼容性问题,该对象的设计还是非常不错的。在这个对象里,存储了与事件相关的属性和方法,比如 target, preventDefault 等,非常实用。

有鉴于此,KISSY 将原生的 event object 封装成 KISSY.EventObject, API 基本遵循 DOM-Level-3-Events 规范。忘掉兼容性吧,还 event object 本色!

Properties

ev 拥有的属性非常多,不同类型的事件,ev 的属性也有不同。目前支持的属性列表如下:


altKey attrChange attrName bubbles button cancelable charCode
clientX clientY ctrlKey currentTarget data detail eventPhase
fromElement handler keyCode layerX layerY metaKey newValue
offsetX offsetY originalTarget pageX pageY prevValue relatedNode
relatedTarget screenX screenY shiftKey srcElement target
toElement view wheelDelta which

除了以上属性,ev 还拥有以下属性:


isDefaultPrevented isPropagationStopped isImmediatePropagationStopped

你还可以给 ev 添加自定义属性,这将在 event-target 中讲述。

Methods

preventDefault void preventDefault()

阻止默认行为的发生。


var S = KISSY, Event = S.Event;

// 最常规的用法:阻止链接跳转
Event.add('#linkId', 'click', function(ev) {
    ev.preventDefault();
    // more code
});

stopPropagation void stopPropagation()

停止事件冒泡。

stopImmediatePropagation void stopImmediatePropagation()

停止当前事件冒泡。不光停止冒泡到下一个事件目标,当前目标上的任何后续监听函数,也马上取消执行。

测试页面:example-stopImmediatePropagation.html

目前主流浏览器都尚未原生支持 stopImmediatePropagation 方法。当同时使用多个类库时,该方法可能不会达到预期,需谨慎。

halt void halt(immediate)

halt() 等价 stopPropagation() + preventDefault()

halt(true) 等价 stopImmediatePropagation() + preventDefault()

看到此处,或许有一点感觉了,但似乎离“只要你能想到,它基本上就能做到”还有比较远的距离。

请继续阅读 event-target