事件绑定及深入上-多个window.onload

Posted 2020-10-04 耿鑫

事件绑定及深入 多个window.onload一起执行

如何让执行两个window.onload
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(); //执行上一个事件
alert(Mr.Lee); //执行本事件
}

----------------------------------------------------
//事件切换器
<style>
.red{
width: 100px;
height: 100px;
background:red;
}
.blue{
width: 100px;
height: 100px;
background:blue;
}
</style>

<div id="box" class="red">测试Div</div>

//添加事件函数
//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); //把this传递过去
}
}

addEvent(window,‘load‘,function(){
alert(‘Lee‘);
})

addEvent(window,‘load‘,function(){
alert(‘Mr.Lee‘);
})

addEvent(window,‘load‘,function(){
alert(‘Miss.Lee‘);
})

以下代码事件切换：
addEvent(window,‘load‘,function(){
var box=document.getElementById(‘box‘);
addEvent(box,‘click‘,function(){
alert(‘Lee‘);
});
addEvent(box,‘click‘,toBlue);
})

function toRed(){
this.className=‘red‘;
removeEvent(this,‘click‘);
addEvent(this,‘click‘,toBlue);
}

function toBlue(){
this.className=‘blue‘;
removeEvent(this,‘click‘);
addEvent(this,‘click‘,toRed);
}
//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion，太多的递归
//因为积累了太多的保存的事件，
//解决方案，就是用完的事件，就立刻移除掉

function removeEvent(obj,type){
if(obj[‘on‘+type]) obj[‘on‘+type]=null;
}