Event Handler 事件处理程序 2 ---跨浏览器事件对象《高程3》

Posted 2021-03-03 baimeishaoxia

0 Event Object导论

支持DOM0、DOM2的浏览器和IE浏览器实现事件处理程序的不同，除了体现在添加事件处理程序的不同上，还体现在event对象的实现差异上，包括具体的属性和方法。
在触发DOM上的某个事件时，都会产生一个event对象，这个对象包含着所有与事件有关的信息。一旦事件处理程序执行完成，event对象就会被销毁。所有浏览器对event的支持方式包括：DOM事件对象和IE事件对象。

1.1 DOM0和DOM2支持的Event对象（针对IE之外的浏览器）

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或 DOM2 级） ，都会传入 event 对象。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click"
}, false);

在通过 html 特性指定事件处理程序时，变量 event 中保存着 event 对象：

<input type="button" value="Click Me" onclick="alert(event.type)"/>

1.2 event对象常用属性和方法

(1) type， String； 只读； 被触发的事件的类型,如click。
(2) currentTarget， Element，只读，其事件处理程序当前正在处理事件的那个元素；
(3) target， Element， 只读， 事件的目标；
在事件处理程序内部，对象 this 始终等于 currentTarget 的值（注册事件处理程序的元素），而 target 则只包含事件的实际目标(事件直接触发的元素)。如果直接将事件处理程序指定给了目标元素，则 this、 currentTarget 和 target 包含相同的值。但是考虑到有时候会使用事件冒泡机制，事件直接触发的元素不一定是事件绑定的元素，例如：

 //按钮在body中，事件会冒泡到body
document.body.onclick = function(event){
alert(event.currentTarget === document.body); //true
alert(this === document.body); //true
alert(event.target === document.getElementById("myBtn")); //true
};

当单击这个例子中的按钮时， this 和 currentTarget 都等于 document.body，因为事件处理程序是注册到这个元素上的。然而， target 元素却等于按钮元素，因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序，结果 click 事件就冒泡到了 document.body，在那里事件才得到了处理。

(4) preventDefault()方法:阻止特定事件的默认行为。例如，链接的默认行为就是在被单击时会导航到其 href 特性指定的 URL。

var link = document.getElementById("myLink");
link.onclick = function(event){
event.preventDefault();
};

(5) stopPropagation()方法:用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。这个属性在jQuery中很重要。

(6) eventPhase 属性:可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么 eventPhase 等于 1；如果事件处理程序处于目标对象（直接点击对象，一般是最内层对象）上，则 eventPhase 等于 2；如果是在冒泡阶段调用的事件处理程序， eventPhase 等于 3。这里要注意的是，尽管“处于目标”发生在冒泡阶段，但 eventPhase 仍然一直等于 2。

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.eventPhase); //2 ，最内元素在事件传播结束后触发
};
document.body.addEventListener("click", function(event){
alert(event.eventPhase); //1，DOM2事件触发使用true参数是在传播阶段触发
}, true);
document.body.onclick = function(event){
alert(event.eventPhase); //3，DOM0事件在冒泡阶段触发
};

当单击这个例子中的按钮时，首先执行的事件处理程序是在捕获阶段触发的添加到 document.body中的那一个，结果会弹出一个警告框显示表示 eventPhase 的 1。接着，会触发在按钮上注册的事件处理程序，此时的 eventPhase 值为 2。最后一个被触发的事件处理程序，是在冒泡阶段执行的添加到document.body 上的那一个，显示 eventPhase 的值为 3。而当 eventPhase 等于 2 时，this、target和 currentTarget 始终都是相等的。

2.1 IE中的事件对象

IE中event对象的访问方式取决于绑定事件处理程序的方法：
1）DOM0级方法: event对象作为window对象的一个属性存在。

        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
        var event = window.event;
            alert(event.type); //"click"
        };

2）如果事件处理程序是通过attachEvent()添加的，就有一个event对象作为事件处理程序的参数。

    

        var btn = document.getElementById("myBtn");
        alert(typeof attachEvent);
        btn. attachEvent("click", function(event){
            alert(event.type); //"click"
        });

2.2 IE中event对象的属性和方法

1）cancelBubble：默认值为false，但将其设置为true就可以取消事件冒泡（与DOM中
的stopPropagation()方法的作用相同）；
2）returnValue：默认值为true，但将其设置为false就可以取消事件的默认行为（与
DOM中的preventDefault()方法的作用相同）；
3）srcElement：事件的直接目标（与DOM中的target属性相同）；
4）type：被触发的事件的类型。

srcElement：因为事件处理程序的作用域是根据指定它的方式来确定的， this 不一定总是等于事件目标。例如：

var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(window.event.srcElement === this); //DOM0级方法，true
};
btn.attachEvent("onclick", function(event){
alert(event.srcElement === this); //false
});

returnValue 属性：只要将 returnValue 设置为 false，就可以阻止默认行为。

var link = document.getElementById("myLink");
link.onclick = function(){
window.event.returnValue = false;
};

cancelBubble 属性：与 DOM 中的 stopPropagation()方法作用相同，都是用来停止事件冒泡的。由于 IE 不支持事件捕获，因而只能取消事件冒泡；但 stopPropagatioin()可以同时取消事件捕获和冒泡。例如：

//在单击按钮之后，只会显示一个警告框。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
window.event.cancelBubble = true;
};
document.body.onclick = function(){
alert("Body clicked");
};

2.3 IE11的变化

但是在IE11发布之后attachEvent函数被替换成了addEventListener。

var btn = document.getElementById("myBtn");
alert(typeof addEventListener);//function
btn.addEventListener("click", function(event){
    alert(event.type); //"click"
});

IE11中srcElement属性测试：

HTML：

<div id="wrapper">
    <span id = "myBtn">the onlt one div</span>
</div>

javascript：

    var wrapper = document.getElementById("wrapper");
    alert(typeof addEventListener);
    wrapper.addEventListener("click", function(event){
        alert(event.target); //span
        alert(event.currentTarget); //div
        alert(event.srcElement); //span
        alert(this);//div
    });

结论：srcElement和target是相同的，都指向事件的直接元素，但是this和currentTarget都指向事件绑定元素。

如果需要阻止默认行为，直接使用在addEventListener()中使用event.preventDefault()即可。根据以上，可以得出初步的结论：在IE11浏览器中使用addEventListener()后，DOM2级event具有的属性和方法都可以使用。

我在IE中使用addEventListener()并没有遇到问题，但是网上有一些开发者在使用时会遇到问题，提供的解决方法有数种：
https://social.msdn.microsoft...
第一种是加入一些脚本：

    <script language=‘javascript‘ for="testAxEvent" event="testEvent(szType, szValue)">
    // Test 1 - statically load the script (This is the basis for the hack)
    // Works on IE8, IE9, IE10 and IE11
        var MSG = document.getElementById("msg");
        MSG.innerHTML = szType + " : " + szValue;
    </script>

第二种是把IE的internet选项-- >安全，点击“将所有区域重置为默认级别”。

3 跨浏览器的事件对象EventUtil

    var EventUtil = {
        //是否支持DOM2？是否是IE？是否支持DOM0?一般前两个if包含了所有情况
        addHandler: 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;
            }
        },
        //IE没有event对象，因此使用window.event
        getEvent: function(event){
            return event ? event : window.event;
        },
        /*使用getEvent()方法得到event对象后才可以使用getTarget()、
        preventDefault()、stopPropagation()方法
        */
        //先检测DOM0 DOM2的target属性，然后检测IE的srcElement属性
        getTarget: function(event){
            return event.target || event.srcElement;
        },
        //先检测DOM0 DOM2的preventDefault()，再检测IE的returnValue
        preventDefault: function(event){
            if (event.preventDefault){
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        //是否支持DOM2？是否是IE？是否支持DOM0?一般前两个if包含了所有情况
        removeHandler: 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;
            }
        },
        //先检测DOM0 DOM2的stopPropagation()，再检测IE的cancelBubble
        stopPropagation: function(event){
            if (event.stopPropagation){
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        }
    };

测试实例：

    var but = document.getElementById("myButtun");
    var handler = function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
         alert(target);// [object HTMLInputElement]
        
    };
    EventUtil.addHandler(but, "click", handler);

当然，上述跨浏览器的事件对象所包含的属性和方法并不是必须的，在实际中可以根据实际情况适当删减一些属性和方法。但是，万变不离其宗。