javascript事件绑定学习要点
编程学习 2021-07-04 21:04www.dzhlxh.cn编程入门
这篇文章主要介绍了javascript事件绑定学习要点,主要包含狼蚁网站SEO优化四个方面1.传统事件绑定的问题，2.W3C事件处理函数，3.IE事件处理函数，4.事件对象的其他补充，有需要的小伙伴可以参考下
事件绑定分为两种：一种是传统事件绑定（内联模型，脚本模型），一种是现代事件绑定（DOM2级模型）。现代事件绑定在传统绑定上提供了更强大更方便的功能。
一 传统事件绑定的问题
传统事件绑定中的内联模型不做讨论，基本很少去用。先来看一下脚本模型，脚本模型将一个函数赋值给一个事件处理函数。传统绑定如：
window.onload=function(){
var box=document.getElementById('box');
box.onclick = function(){
alert('Lee');
};
};
问题一：一个事件处理函数触发两次事件
如果一个页面有两个或者多个js，并且第一个js是第一个程序开发的，第二个js是第二个程序员开发的。第一个window.onload被覆盖了，如
window.onload=function(){
alert('Lee');
};
window.onload=function(){
alert('Mr.lee');
}
结果只是打印了 Mr.lee
其实是有办法解决这个问题的，看狼蚁网站SEO优化这两种形式。
a:
alert(window.onload);//一开始没有注册window.onload,那么就是null
window.onload=function(){
alert('Lee');
};
alert(window.onload);//如果已经有window.onload,打印的是函数function
window.onload=function(){
alert('Mr.lee');
}
b:
alert(typeof window.onload);//一开始没有window.onolad,旧版火狐显示undefined,新版显示object,
window.onload=function(){
alert('Lee');
};
alert(typeof window.onload);//如果已经有window.onload,所有浏览器都会显示function
window.onload=function(){
alert('Mr.lee');
}
所以解决办法有了。
window.onload=function(){
alert('Lee');
};
if(typeof window.onload=='function'){
var saved=null;//保存上一个事件对象
saved=window.onload;
}
//saved 就是window.onload,saved()相当于window.onload(),但是window.onload()不能执行的
//所以saved()相当于window.onload=function(){}
window.onload=function(){
if(saved){
saved();//执行上一个事件 window.onload=function(){}
}
alert('Mr.lee'); //执行本事件
}
问题二：事件切换器
切换一个id为box的div，让里面的背景red与blue直接切换，并且切换之前弹框一次，如：
window.onload=function(){
var box=document.getElementById('box');
box.className="red";
box.onclick=function(){
alert('Lee'); //只执行了一次
blue.call(this);//通过匿名函数执行某一函数，那么里面的this就是代表的window,所以可以通过call传递
};
}
function blue(){
this.className="blue";
this.onclick=red;
}
function red(){
this.className="red";
this.onclick=blue;
}
上面的代码虽然实现了切换功能，但是弹框只执行了一次。
//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){}
function addEvent(obj,type,fn){
//用于保存上一个事件
var saved=null;
if(typeof obj['on'+type]=='function'){
saved=obj['on'+type];//保存上一个事件
}
obj['on'+type]=function(){
if(saved){
saved();
}
fn.call(this);
}
}
addEvent(window,'load',function(){
var box=document.getElementById("box");
//addEvent(box,'click',function(){ //目的达到，每次都执行了，没有被覆盖
// alert('ss');
/