这篇文章主要介绍了 JavaScript 实现跨浏览器的添加及删除事件绑定函数, 采用纯 javascript 实现 jquery 的 bind 及 unbind 添加与删除事件绑定的技巧, 具有很好的浏览器兼容性, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JavaScript 实现跨浏览器的添加及删除事件绑定函数。分享给大家供大家参考。具体如下:
IE 的事件绑定函数是 attachEvent;而 Firefox, Safari 是 addEventListener;Opera 则两种都支持。使用 jQuery 就可以使用简单的 bind(),或者 $().click() 之类的函数解决,而如果不使用 JavaScript 框架的时候,大家可是使用下面的封装 bind() 函数。
添加事件绑定 bind()
- /************************************
- * 添加事件绑定
- * @param obj : 要绑定事件的元素
- * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick".
- * @param fn : 事件处理函数
- ************************************/
- function bind( obj, type, fn ){
- if( obj.attachEvent){
- obj['e'+type+fn]= fn;
- obj[type+fn]=function(){
- obj['e'+type+fn]( window.event);
- }
- obj.attachEvent('on'+type, obj[type+fn]);
- }else
- obj.addEventListener( type, fn,false);
- }
例如给 document 添加一个点击事件:
- var fn=function(){
- alert("Hello, World!!");
- };
- bind(document,"click", fn);
删除事件绑定 unbind()
unbind() 对于上面的 bind() 函数
- /************************************
- * 删除事件绑定
- * @param obj : 要删除事件的元素
- * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick"
- * @param fn : 事件处理函数
- ************************************/
- function unbind( obj, type, fn ){
- if( obj.detachEvent){
- obj.detachEvent('on'+type, obj[type+fn]);
- obj[type+fn]=null;
- }else
- obj.removeEventListener( type, fn,false);
- }
例如删除第一个绑定的 document 点击事件:
- unbind(document,"click",fn);
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: