javascript页面加载与事件监听函数

http://blog.csdn.net/rainedman/article/details/6745811

在javascript编程中,经常需要设置页面加载函数和事件监听函数,为了便于广泛编程和屏蔽浏览器差异,有牛人对这种需求进行了封装,实现了更高抽象的函数。

一:页面加载函数

假设要在页面onload事件中添加两个函数f1和f2.如果这么写window.οnlοad=f1;window.οnlοad=f2.那么这个事件只能触发一个函数(后面的那个)。如何才能添加两个呢?可以这样

[javascript]  view plain  copy
  1. window.onload = function(){  
  2. f1();  
  3. f2();  
  4. }  

但是这样写不能跨浏览器,并且也不能让人觉得非常专业。于是便有了下面非常牛X的方式

[javascript]  view plain  copy
  1. var baseLib = {//基础类库函数,用于实现添加页面加载函数  
  2.                 addLoadListener:function(fn){  
  3.                     if (typeof window.addEventListener != 'undefined'){  
  4.                         window.addEventListener('load', fn, false);  
  5.                     }else if (typeof document.addEventListener != 'undefined'){  
  6.                         document.addEventListener('load', fn, false);  
  7.                     }else if (typeof window.attachEvent != 'undefined'){  
  8.                         window.attachEvent('onload', fn);  
  9.                     }else{  
  10.                         var oldfn = window.onload;  
  11.                         if (typeof window.onload != 'function')    window.onload = fn;  
  12.                         else{  
  13.                             window.onload = function(){  
  14.                                 oldfn();  
  15.                                 fn();  
  16.                             };  
  17.                         }  
  18.                     }  
  19.                 }  
  20.             }  
如果需要将某个函数添加到页面加载事件中只需要:

[javascript]  view plain  copy
  1. baseLib.addLoadListener(f1);  
  2.             baseLib.addLoadListener(f2);  
  3.             baseLib.addLoadListener(function(){  
  4.                 alert("gagagaga");  
  5.             });  

这样在任何需要添加的时候只需要调用baseLib.addLoadListener()函数即可。


二,注册事件监听函数

之前曾经提到过,要给某个DOM节点注册事件监听方式有这样两种:

1.直接在节点上注明属性,如<div id="container" οnclick="show()">

2.代码注册监听,如document.getElementById('container').onclick = show;

现在要介绍一种值得向别人炫耀的方式来实现事件监听:

[javascript]  view plain  copy
  1. var baseLib = {//基础类库函数,用于实现添加页面加载函数  
  2.                 addEventListener:function(target, eventType, functionRef, capture){  
  3.                     if (typeof target.addEventListener != 'undefined')target.addEventListener(eventType, functionRef, capture);  
  4.                     else if (typeof target.attachEvent != 'undefined')target.attachEvent('on' + eventType, functionRef);  
  5.                     else{  
  6.                         eventType = 'on' + eventType;  
  7.                         if (typeof target[eventType] == 'function'){  
  8.                             var oldListener = target[eventType];  
  9.                             target[eventType] = function(){  
  10.                                 oldListener();  
  11.                                 return functionRef();  
  12.                             }  
  13.                         }else target[eventType] = functionRef;  
  14.                     }     
  15.                     return true;  
  16.                 }  
  17.             }  

说明:参数一target:需要注册事件监听的DOM节点

参数二eventType:事件类型,如load,click

参数三functionRef:需要注册的函数名

参数四capture:bool值,不知道什么意思

例如,要给页面的单击事件注册一个函数,可以这样写代码

[javascript]  view plain  copy
  1. baseLib.addEventListener(document,"click",clickFn,false);  
这样在页面上单击的时候就会触发clickFn函数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值