经验总结 JavaScript DOM添加事件的实现

开发 前端
这里向大家描述一下JavaScript DOM添加事件,对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件!而对于MSIE来说则是用attachEvent()来给对象添加事件!

 你对JavaScript DOM添加事件的行为是否熟悉,这里向大家简单介绍一下,这是我在给库中添加事件的时候写的JavaScript DOM添加事件的方法!这个方法是实现了跨浏览器之间的方法!

JavaScript DOM添加事件

这是我在给库中添加事件的时候写的JavaScript DOM添加事件的方法!这个方法是实现了跨浏览器之间的方法!

因为对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件!而对于MSIE来说则是用attachEvent()来给对象添加事件!这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式!这样我们就可以直接调用addEvent()方法来给对象添加事件了!

让我们来看看吧! 

  1. /**  
  2. *注册一个监听事件到元素  
  3. *@param{Object}node所要添加事件的对象  
  4. *@param{Object}type事件类型  
  5. *@param{Object}listener事件方法  
  6. */  
  7. functionaddEvent(node,type,listener){  
  8. //使用前面的方法检查兼容性以保证平稳退化  
  9. if(!(node=$(node)))returnfalse;  
  10.  
  11. if(node.attachEvent){//这是针对IE的方法  
  12. node['e'+type+listener]=listener;  
  13. node[type+listener]=function(){node['e'+type+listener](window.event);}  
  14. node.attachEvent('on'+type,node[type+listener]);  
  15. returntrue;  
  16. }elseif(node.addEventListener){  
  17. //这是针对支持DOM的浏览器的方法  
  18. node.addEventListener(type,listener,false);  
  19. returntrue;  
  20. }  
  21. //若两种方法都不具备则返回false;  
  22. returnfalse;  
  23. };  
  24. window['liujingning']['addEvent']=addEvent;  
  25.  

 使用方法:

比如我们要给页面的onload()上添加事件,我们就可以这样写: 

  1. liujingning.addEvent(window,'load',function(Event)  
  2. {//这里写你要写的代码} 

我们也可以给某个ID添加事件 

  1. vargetId=document.getElementById('aa');  
  2. liujingning.addEvent(getId,'load',function(Event)  
  3. {//这里写你要写的代码}  

【编辑推荐】

  1. JavaScript DOM特性与应用详解
  2. JavaScript和DOM轻松实现数据访问
  3. JavaScript获取HTML DOM节点元素详解
  4. 深入了解JavaScript HTML DOM对象
  5. 解析HTML DOM Checkbox对象的属性和方法

 

责任编辑:佚名 来源: jb51.net
相关推荐

2009-10-15 09:27:00

2011-07-21 13:40:17

java

2019-05-07 11:24:07

ReactJavascriptTypescript

2009-09-29 16:32:11

OJB Hiberna

2009-08-19 09:24:43

AJAX引擎经验总结

2009-09-16 17:13:54

学习Linq

2009-09-01 13:00:05

C#实现Windows

2010-04-21 14:53:46

Oracle游标

2010-05-19 17:24:55

MySQL编码

2010-03-25 13:42:14

云计算

2010-03-23 11:39:49

云计算

2013-12-18 15:54:21

2009-09-25 17:26:55

使用Hibernate

2010-07-16 09:14:49

Perl模式

2009-08-13 18:13:27

C#学习经验

2010-03-08 15:12:27

Python语言

2010-06-13 13:44:07

UML学习笔记

2009-12-24 16:46:03

WPF性能优化

2010-01-27 18:12:14

Android dia

2010-01-26 13:28:11

Android开发要点
点赞
收藏

51CTO技术栈公众号