注意:
W3C事件的 target 与 currentTarget 的区别?
- target 只会出现在事件流的目标阶段
- currentTarget 可能出现在事件流的任何阶段
- 当事件流处在目标阶段时,二者的指向相同
- 当事件流处于捕获或冒泡阶段时:currentTarget 指向当前事件活动的对象(一般为父级)
手写事件侦听器(浏览器兼容)
// 手写事件侦听器
var eventUtil = {
getEvent: function(e) {
return e || window.event;
},
getTarget: function(e) {
return e.target || e.srcElement;
},
addListener: function(el, type, handler) {
if(el.addEventListener) {
el.addEventListener(type, handler, false);
} else if (el.attachEvent) {
el.attachEvent('on' + type, handler);
} else {
el['on' + type] = handler;
}
},
removeListener: function(el, type, handler) {
if(el.removeListener) {
el.removeListener(type, handler, false);
} else if (el.detachEvent) {
el.detachEvent(type, handler);
} else {
el['on' + type] = null;
}
},
preventDefault: function(e) {
if(e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
},
stopPropagation: function(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
};
// 调用
(function() {
var btn = document.getElementById('btn');
var link = document.getElementsByTagName('a')[0];
eventUtil.addListener(btn, 'click', function(e) {
var e = eventUtil.getEvent(e);
var target = eventUtil.getTarget(e);
console.log(event.type, target);
eveventUtil.stopPropagation(e)
});
eventUtil.addListener(link, 'click', function(e) {
// 阻止点击连接跳转, 即阻止默认事件
var e = eventUtil.getEvent(e);
eventUtil.preventDefault(e)
});
eventUtil.addListener(document.body, 'click', function() {
console.log('click body');
});
})();
javascript事件模型:
- Dom0级模型
又称为原始事件魔性, 在该模型中, 事件不会传播, 即没有事件流的概念. 事件绑定监听函数比较简单, 有两种方式
// 1. html代码中直接绑定
<input type = "button" onclick = "fun()">
// 2. 通过js代码指定属性值
var btn = document.getElementById('btn');
btn.onclick = fun;
// 移除监听函数
btn.onclick = null;
- IE事件模型
IE事件模型有两个过程: 事件处理和事件冒泡
var btn = document.getElementById('.btn');
btn.attachEvent(‘onclick’, showMessage);
btn.detachEvent(‘onclick’, showMessage);
- Dom2级模型(属于W3C标准模型)
在该事件模型中, 一次事件共有三个过程:
事件捕获--事件处理--事件冒泡
var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage, false);
btn.removeEventListener(‘click’, showMessage, false);
/**
* 参数说明:
* eventType指定事件类型(不要加on)
* handler是事件处理函数
* useCapture是一个boolean用于指定是否在捕获阶段进行处理,一般设置为false与IE浏览器保持一致
**/