JavaScript 事件绑定及深入

事件绑定分为两种:

一种是传统事件绑定(内联模型/脚本模型);上一章内容; 一种是现代事件绑定(DOM2级模型);现代事件绑定在传统事件绑定基础上提供了更强大的功能; 一 传统事件绑定的问题

// 问题一:一个事件处理函数触发两次事件;
window.onload = function(){ // 第一组程序;
alert('Lee');
}
window.onload = function(){ // 第二组程序;
alert('Mr.Lee');
}
// PS:当两组程序同时执行的时候,后面一个会把前面一个完全覆盖;
// 导致前面的window.onload完全失效了;
// 解决方案:
window.onload = function(){ // 第一组事件处理程序,会被覆盖;
alert('Lee');
}
if(typeof window.onload == 'function'){ // 判断之前是否有window.onload;
var saved = null; // 创建一个保存器;
saved = window.onload; // 把之前的window.onload保存起来;
}
window.onload = function(){ // 下一个要执行的事件;
// saved()=window.onload = function
if(saved)saved(); // 判断之前是否有事件,如果有则先执行之前保存的事件;
alert('Mr.Lee'); // 执行本事件的代码;
}

2.如果解决覆盖问题,就必须包含同时执行;
box.onclick = function(){ // 包含进去,但可读性降低;
toAlert(); // 第一次不会被覆盖,但第二次又被覆盖;
toBlue.call(this); // 还必须把this传递到切换器里;
}

// 用自定义事件函数注册到切换器上查看效果:
addEvent(window,function(){
var box = document.getElementById('box');
addEvent(box,'click',toBlue);
});
function toRed(){
this.className = 'red';
addEvent(this,toBlue);
}
function toBlue(){
this.className = 'blue';
addEvent(this,toRed);

二 W3C事件处理函数

// "DOM2级事件"定义了两个方法,用于添加事件和删除事件的处理程序:addEventListener()和removeEventListener();

// 事件切换器
window.addEventListener('load',function(){
var box = document.getElementById('box');
box.addEventListener('click',function(){ // 不会被覆盖/误删;
alert('Lee');
},false);
box.addEventListener('click',toBlue,false); // 引入切换;
},false);

function toRed(){
this.className = 'red';
this.removeEventListener('click',toRed,false); // 移除事件处理函数;
this.addEventListener('click',false); // 添加需要切换的事件处理函数;
}

function toBlue(){
this.className = 'blue';
this.removeEventListener('click',false);
this.addEventListener('click',false);
}

// 设置冒泡和捕获阶段
document.addEventListener('click',function(){
alert('document');
},true); // 设置为捕获;

document.addEventListener('click',false); // 设置为冒泡;

三 IE事件处理函数

// IE中实现了与DOM中类似的两个方法:attachEvent()和detachEvent();

// 这两个方法接收相同的参数:事件名和函数;

<div class="jb51code">
<pre class="brush:js;">
// 在使用这两组函数的时候,区别:
// 1.IE不支持捕获,只支持冒泡;
// 2.IE添加事件不能屏蔽重复的函数;
// 3.IE中的this指向的是window而不是DOM对象;
// 4.在传统事件上,IE是无法接受到event对象的;但使用了attachEvent()却可以;
window.attachEvent('onload',function(){
var box = document.getElementById('box');
box.attachEvent('onclick',toBlue);
});

function toRed(){
var that = window.event.srcElement;
that.className = 'red';
that.detachEvent('onclick',toRed);
that.attachEvent('onclick',toBlue);
}

function toBlue(){
var that = window.event.srcElement;
that.className = 'blue';
that.detachEvent('onclick',toBlue);
that.attachEvent('onclick',toRed);
}
// PS:IE不支持捕获;
// IE不能屏蔽;
// IE不能传递this,可以call过去;

// 在传统绑定上,IE是无法像W3C那样通过传参接受event对象;但如果使用了attachEvent()却可以;
box.onclick = function(evt){
alert(evt); // undefined;
}

box.attachEvent('onclick',function(evt){
alert(evt); // object;
alert(evt.type); // click;
});

// 兼容IE和W3C的事件切换器函数;
function addEvent(obj,fn){ // 添加事件处理程序兼容;
if(obj.addEventListener){
obj.addEventListener(type,fn);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}
}

function removeEvent(obj,fn){ // 移除事件处理程序兼容;
if(obj.removeEventListener){
obj.removeEventListener(type,fn);
}esle if(obj.detachEvent){
obj.detachEvent('on'+type,fn);
}
}

function getTarget(evt){ // 得到事件目标;
if(evt.target){
return evt.target;
}else if(window.event.srcEleemnt){
return window.event.srcElement;
}
}