码迷,mamicode.com
首页 > 其他好文 > 详细

自定义事件处理函数

时间:2017-08-23 16:48:20      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:name   ==   移除   this   保存   on()   可读性   click   color   

解决了传统事件处理函数的覆盖问题、可读性问题、this传递问题

 1 //添加时间函数
 2 function addEvent(obj,type,fn){            //obj相当于window,type相当于onload,fn相当于function(){};
 3     var saved = null;            //用于保存上一个事件
 4     if (typeof obj[‘on‘ + type] == ‘function‘) {        //用于判断事件是否存在
 5         saved = obj[‘on‘ + type];        //保存上一个事件
 6     }
 7 
 8      obj[‘on‘ + type] = function(){
 9          if (saved) saved();
10          fn.call(this);            //把this传过去,传统onclick会自动传
11      };
12 }
13 
14 //移除事件函数
15 
16 function removeEvent(obj,type){
17     if (obj[‘on‘ + type]) obj[‘on‘ + type] = null;
18 }
19 
20 
21 //事件切换器
22 addEvent(window,‘load‘,function(){
23     var box = document.getElementById("box");
24     addEvent(box,‘click‘,toBlue);
25 });
26 
27     function toBlue(){
28         this.className = "blue";
29         removeEvent(this,‘click‘);
30         addEvent(this,‘click‘,toRed);
31     }
32 
33     function toRed(){
34         this.className = "red";
35         removeEvent(this,‘click‘);
36         addEvent(this,‘click‘,toBlue);
37     }

 

自定义事件处理函数

标签:name   ==   移除   this   保存   on()   可读性   click   color   

原文地址:http://www.cnblogs.com/zz334396884/p/7418886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!