跨浏览器处理事件

一些额外tips

DOM0的处理事件就简单说一下
一种直接在标签里写属性(小写οnclick=’fun···’)
另一种则将一个处理函数赋值给一个事件处理程序属性。
要移除也就是把该事件处理程序属性赋值为null;


一些时间事件处理你该知道的事

现在切入正题:
addEventListener和removeEventListener是DOM2级事件。
参数中唯一值得一提的就是第三个参数
true: 捕获阶段调用事件处理程序(从父级->子元素)
false: 冒泡阶段调用(从子元素->父级)

而IE任性的实现了与 DOM 中类似的两个方法:attachEvent和detachEvent
而且他们不提供任何决定捕获事件阶段的方法,默认添加在冒泡阶段···还好还好,起码还是跟随了我们日常处理的习惯。

除此之外还要提一下两个玩意儿
event.target 和 event.currentTarget
事件触发时,会默认传入一个event对象,event.target存储的是事件触发对象,event.currentTarget 存储的是事件绑定对象,当然,很多时候是同一个对象。

老版本IE在这里又作了一把,没有event.target ,而是event.srcElement···作用和event.target 一样。

W3C这么说:

Event.srcElement is a proprietary alias for the standard Event.target property. It is specific to old versions of Microsoft Internet Explorer.

var EventUtil = {
    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;
        }
    },

    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;
        }
    }
}
var btn = document.getElementById("myBtn");
 function getTarget(e){
        var event=e||window.event;
        return event.target||event.srcElement;//返回指向事件触发元素
    }
var handler = function() {
    var target=getTarget();//重定向this的指向
    alert("Clicked");
}
EventUtil.addHandler(btn, "click", handler);
EventUtil.removerHandler(btn, "click", handler);

你可能感兴趣的:(Javascript)