事件封装（多个函数绑定一个事件，估计这样解释不对）

时间：2014-05-15 23:16:15 阅读：379 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title></title>
<style type="text/css">
.red{width:100px;height:100px;background:red;}
.blue{width:100px;height:100px;background:blue;}
</style>
<script type="text/javascript">
/*window.onload=function(){
alert("Lee");
}
if(typeof window.onload=="function"){
var saved=null;
saved=window.onload;
}
window.onload=function(){
if(saved){
saved();
}
alert("Mr.Lee");
}*/
//传统绑定机制
/* window.onload=function(){
var box=document.getElementById("box");

box.onclick=function() {
alert("Lee");
toRed().call(this);
}
}
function toRed(){
// alert(this)
this.className="red";
this.onclick=toBlue;
}
function toBlue(){
this.className="blue";
this.onclick=toRed;
}

*/
/* window["onload"]=function(){
alert("Lee");
}*/
/* 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();
}
}
addEvent(window,"load",function(){
alert("Lee");
})
addEvent(window,"load",function(){
alert("Leesss");
})*/

*****************风格线*********这里才是本章高潮处*******************************************************************

//当不断点击的时候，浏览器就会卡死，并且报错：too muchrecursion，太多的递归
//因为积累了太多保存的事件
//解决方案，就是用完事件就立即清除
//移除事件
function removeEvent(obj,type){
if(obj["on"+type]) obj["on"+type]=null;
}
//添加事件
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.call(this);//先执行上一个事件
fn.call(this);//这两个地方要加个call呢不然一会this就指向window了
}
}

addEvent(window,‘load‘,function(){
var box=document.getElementById("box");
addEvent(box,‘click‘,toRed); //this 没有传递过去
})
function toRed(){
this.className="red";
removeEvent(this,‘click‘);//移除事件函数
addEvent(this,‘click‘,toBlue);//添加事件函数
}
function toBlue(){
this.className="blue";
removeEvent(this,‘click‘);//移除事件函数
addEvent(this,‘click‘,toRed);//添加事件函数
}

</script>
</head>
<body>
<div id="box" class="blue">测算点</div>
</body>

</html>

bubuko.com,布布扣

事件封装（多个函数绑定一个事件，估计这样解释不对）,布布扣,bubuko.com

事件封装（多个函数绑定一个事件，估计这样解释不对）

标签：style blog class c java ext

原文地址：http://blog.csdn.net/xiaomogg/article/details/25906453

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行