Skip to main content
 首页 » 编程设计

jsADS之DOM事件属性和方法

2022年07月16日41zhenyulu

/*--------------- 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);
    });

本文参考链接:https://www.cnblogs.com/webFrontDev/archive/2012/12/16/2820391.html