本文详细介绍了JavaScript中的事件处理机制，包括事件流的概念、不同类型的事件处理程序及其使用方法。此外，还探讨了事件代理的原理与应用，以及如何自定义事件对象。
JS事件
JavaScript与HTML之间的交互通过事件实现。可以使用侦听器来预订事件。 事件流描述的是从页面中接收事件的顺序：
-
事件冒泡：IE的事件流，事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
-
事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后收到事件。 老版本浏览器不支持事件捕获，建议使用事件冒泡，有特殊要求时再使用事件捕获。
事件模型：冒泡型事件，捕获型事件。
DOM事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
事件处理程序
1. HTML事件处理程序
HTML事件处理程序标签上的事件属性，如onclick。
2. DOM0级事件处理程序
每个元素都有自己的事件处理程序属性，这些属性全部小写。优点：简单：跨浏览器。this指向当前元素。
ele.onclick=function(){}; //添加事件处理
ele.onclicj=null; //删除
复制代码event对象作为window对象的一个属性存在。event=event||window.event;，
如果有多个，前面的会被后面的所覆盖，也会覆盖HTML。
3. DOM2级事件处理程序
DOM2级事件处理程序的方法：addEventListener()，removeListener()。(IE9+）
方法接收三个参数：事件名，处理函数，布尔值（默认为false，false表示在冒泡阶段触发事件处理，true表示捕获阶段触发）
addEventListener('click',function(event){});
复制代码好处：可以添加多个事件处理程序（按添加顺序触发，无论事件捕获或事件冒泡），不会覆盖添加的DOM0或HTML，按添加顺序触发。
通过addEventListener()添加的事件处理程序只能使用removeListener()来移除，移除时传入的参数要一致（匿名函数无法移除）。
- event.stopPropagation()：立即停止事件在DOM层次中的传播。
- event.prevantDefault()：阻止特定事件的默认行为。
4. IE事件处理程序
IE事件处理程序的两个方法为attachEvent(), detachEvent()。（只支持冒泡事件，IE和 Opera支持）。格式：
// 注意是onclick
attachEvent('onclick',function(event){});
复制代码与DOM0级的主要区别在于事件处理程序的作用域：DOM0在其所属原生的作用域内运行，IE事件处理程序会在全局作用域中运行，所以this等于window。
也可为一个元素添加几个事件处理程序，触发的顺序是相反的。
detachEvent()移除和removeListener()相同。
// 阻止特定事件的默认行为
window.event.returnValue=false;
复制代码缺点：同一个函数可以被注册到同一个对象同一个事件上多次，IE下的
attachEvent()方法不支持捕获，和传统事件注册没多大区别（除了能绑定多个事件处理函数），并且IE的attachEvent()方法存在内存泄漏问题。
选用：DOM0没有浏览器兼容性问题；但是一个DOM0级事件只能给某一个元素添加一个事件处理函数，而DOM2级事件处理程序（事件监听机制）可以给同一个元素依次添加多个事件处理。
5. DOM3级事件
- UI事件：
load、unload文档被完全卸载后触发，resize浏览器窗口调整到一个新高度或宽度，scroll窗口滚动的时候触发 - 焦点事件：
blur元素失去焦），focus获得焦点，这个事件不会冒泡 鼠标事件：click，dblclick，mousedown，mouseenter，mouseleave，mousemove，mouseout，mouseover，mouseup - 滚轮事件：
mousewheel - 文本事件：
textInput（按下字符键） - 键盘事件：
keydown（按下任意键），keypress（按下字符键），keyup - 合成事件，变动事件
检查浏览器是否支持DOM2鼠标事件：
// 除了dblclick、mouseenter、mouseleave
所有鼠标事件
document.implementataion.hasFeature('MouseEvents','2.0');
// 注意单词为单数形式
document.implementataion.hasFeature('MouseEvent','3.0');
复制代码相关问题
什么是事件代理
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。
获取事件的目标
event.target||event.srcElement;
//点击一个li就能显示它内部文本：使用事件代理
var list=document.getElementById("list");
list.onclick=function(ev){
var oEvent=ev||event;
var target=oEvent.target||oEvent.srcElement;
alert(target.innerHTML);
}
复制代码事件处理返回false
- 在jQuery事件处理中返回
false相当于jQuery的event对象连续调用了preventDefault()和stopPropagation()方法。preventDefault()：在时间传播链中阻止事件冒泡。stopPropagation()：只是在事件发生时阻断浏览器的默认响应，但事件仍然会向上传递。
- 在超链接标签的原生JavaScript
onclick事件处理中返回false会阻止浏览器默认的地址导航，并且阻止了DOM事件的冒泡传递。 - 在非链接标签（div、button等）的原生JavaScript
onclick事件处理中返回false不会起任何作用。
自定义事件对象
(function(window, document) {
/*
*自定义事件类型：组合使用构造函数模式和原型模式
*/
//构造函数模式定义实例属性
function CustomEvent(){
this._listeners= {};
}
//原型模式定义方法和共享属性
CustomEvent.prototype={
constructor: CustomEvent,
//添加事件
addEvent: function(e, fn) {
if (typeof this._listeners[e]==='undefined') {
this._listeners[e] = [];
}
if (typeof fn === 'function') {
//同一个时间的同一个fn是否可以重复添加？
this._listeners[e].push(fn);
}
},
//移除事件:如果addEvent传入的是匿名函数，则不能单独针对匿名函数事件的移除
removeEvent: function(e, fn) {
//对参数进行判断
var arr=this._listeners[e],
len;
if (typeof e !== 'string' ||!(arr instanceof Array)) {
return this;
}
//清除e对应的fn函数
len=arr.length;
if (typeof fn === 'function') {
for(var i=0;i<len;i++){
if(arr[i]===fn){
arr.spice(i,1); //删除
}
}
}else{//如果fn不满足条件或者没有传入，则清除e的全部事件方法
delete this._listeners[e];
}
return this;
},
//触发事件：如果传入e，则只触发e，否则触发对象的所有事件
fireEvent: function(e){
var arr=this._listeners[e],
len;
if(arr instanceof Array){
len=arr.length;
for(var i=0;i<len;i++){
if(typeof arr[i]==='function'){//执行e事件的所有方法
arr[i](e);
}
}
}
return this;
},
//清空一个对象的所有事件
clear: function(){
this._listeners={};
}
};
//test
var a=new CustomEvent();
var b=new CustomEvent();
var message=document.getElementById('message');
a.addEvent('test',function(e){
message.innerHTML+=('a fireEvent '+e+'<br/>');
});
function fna(e){
message.innerHTML+=('a fireEvent '+e+' another<br/>');
}
a.addEvent('test',fna);
b.addEvent('test',function(e){
message.innerHTML+=('b fireEvent '+e+'<br/>');
})
})(window, document);
复制代码通用的事件侦听器函数
var EventUtil = {
/**
* 添加事件
* 能力检测: DOM2,IE8及更早版本,DOM0
*/
addEvent: 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;
}
},
/**
*移除事件
* 注意：addEventListener和attachEvent移除时传入的参数与添加处理程序时使用的参数相同，
* 这也就是意味着添加匿名函数将无法移除
*/
removeEvent: 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;
}
}
/**
* 阻止特定事件的默认行为，即取消进一步的时间捕获或冒泡
*/
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
/**
* 立即停止事件在DOM层次中的传播
*/
stopPropation: function(event){
if(event.stopPropation){
event.stopPropation(); //同时取消时间捕获和冒泡
}else{
event.cancelBubble=true; //IE取消时间冒泡
}
}
/**
* 获取event对象
* 在兼容DOM的浏览器中，event只是简单地传入和返回，而在IE中，event参数是未定义的
* 使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在
*/
getEvent: function(event){
return event?event:window.event;
}
/**
* 获取事件目标
* 对象this始终等于currentTarget的值，而target则只包含事件的实际目标
* 对应IE中的是srcElement属性
*/
getTarget: function(event){
return event.target||event.srcElement;
}
}复制代码
扫一扫
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
