一些额外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);