jsADS-DOM事件属性和方法

/*--------------- DOM2时间规范中的Event对象 --------------*/

    /**

     * bubbles  {Boolean}   表示事件是否是冒泡阶段的事件。如果是则为true，反之false

     * cancelable   ｛Boolean｝   表示事件是否具有可以被取消的默认动作，有则为true

     * currentTarget    {DOM}   当前正在处理的事件侦听器所在的事件流中的DOM元素，currentTarget可能会不同于target属性，因为在事件流的捕获或者冒泡阶段中，事件侦听器可能不是注册到target（目标对象上），而是注册到目标的祖先元素上，this始终等于currentTarget的值

     * target   {new EventTarget}   DOM文档中最早调用事件序列的目标对象

     * timestamp    {DOMTimeStamp}  时间戳

     * type     {String}    一个包含事件名称的字符串

     * eventPhase   表示当前事件侦听器处于事件流的哪个阶段，使用1-3表示。也可以在比较表达式中使用Event常量CAPTURING_PHASE,AT_TARGET和BUBBLING_PHASE

     */

    function eventListener(event) {

        switch (event.eventPhase) {

            case Event.CAPTURING_PHASE:

                //如果处于捕获阶段要运行的代码

                break;

            case Event.AT_TARGET:

                //如果当前是目标对象要运行的代码

                break;

            case Event.BUBBLING_PHASE:

                //如果处于冒泡阶段要运行的代码

                break;

        }

    }

 

    // 可以不依赖于this关键字，而是根据事件的阶段使用target或currentTarget属性

    function eventListener(event) {

        window.open(event.currentTarget.href);

        event.preventDefault();

    }

    var a = document.getElementById('example');

    a.addEventListener('click', eventListener, false);

 

    /**

     * Event对象的方法

     * initEvent(eventType,canBubble,cancelable),用于初始化通过document.createEvent('Event')方法创建的事件对象

     * preventDefault(),用于取消对象的默认动作

     * stopPropagation()，用于停止事件流的进一步执行，包括捕获阶段，目标对象和冒泡阶段

     */

 

    /**

     * DOM2事件规范定义的MouseEvent对象

     * 属性:

     *  altKey, ctrlKey, shiftKey, 都是布尔值

     *  button：button中会包含表示哪个鼠标键被按下的一个整数值

     *      0表示左键

     *      1表示中间（如果有）

     *      2表示右键（或Apple单键鼠标中的Command-click）

     *  clientX和clientY，事件发生位置相对于DOM实现的客户端区域的x，y坐标，相对浏览器窗口

     *  screenX和screenY： 相对设备屏幕的xy坐标

     *  relatedTarget： 与事件相关的‘次要目标’。多数情况下，这个属性的值都是null，但在mouseover事件中，它引用的是鼠标离开的前一个对象，同样地，在mouseout事件中，它引用的是鼠标之前进入的那个对象

     */

 

    function getTarget(event) {

        eventObject = getEventObject(event);

 

        //如果是w3c或MSIE的模型

        var target = event.target || event.srcElement;

 

        //如果像Safari中一样是一个文本节点

        //重新将目标对象指定为父元素

        if (target.nodeType === ADS.node.TEXT_NODE) {

            target = target.parentNode;

        }

 

        return target;

    }

 

    window.ADS.getTarget = getTarget;

 

    //usage

    ADS.addEvent(window, 'load', function () {

        function eventListener(event) {

            var target = ADS.getTarget(event);

            window.open(target.href);

        }

 

        var a = document.getElementById('example');

        ADS.addEventListener(a, 'click', eventListener);

    });