JavaScript实现跨浏览器的添加及删除事件绑定函数实例

2024-04-05 14:05:34

本文实例讲述了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程序设计有所帮助。

js实现加载更多功能实例

项目的一个前端页面展示已购买商品时,要求能下拉加载更多.关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心.再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展.想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看. h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端
myEvent.js javascript跨浏览器事件框架

event究竟有多么复杂?可见前辈的6年前的努力:最佳的addEvent是怎样诞生的,后起之秀jQuery也付出了一千六百多行血汗代码(v 1.5.1)搞定了6年后出现的各种核的浏览器. 我参考前辈的代码以及自己的理解尝试写了一个事件框架,我的框架完成了一个事件机制的核心,它能提供统一接口实现多事件绑定以及避免内存泄漏等其他一些问题,更重要的是性能还不错. 我的手法: 所有回调函数根据元素.事件类型.回调函数唯一ID缓存在一个_create对象中(其内部具体结构可见下面源码的关于_cache的注
基于JS快速实现导航下拉菜单动画效果附源码下载

这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&
JavaScript判断窗口是否最小化的代码(跨浏览器)

复制代码代码如下: function isMinStatus() { var isMin = false; if (window.outerWidth != undefined) { isMin = window.outerWidth <= 160 && window.outerHeight <= 27; } else { isMin = window.screenTop < -30000 && window.screenLeft < -30000
js 实现一些跨浏览器的事件方法详解及实例

js实现一些跨浏览器的事件方法用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: function(element, type, handler) {/* 添加事件 */ if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (ele
跨浏览器通用、可重用的选项卡tab切换js代码

由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过
JavaScript跨浏览器获取页面中相同class节点的方法

网页开发时,在很多时候我们需要操作相同类名的元素,即class相同的元素.昨天参加笔试,有一道相关的题目没答上来: JavaScript获取页面中class为test的节点于是收集了一些相关的资料,在本文中列举了两种我觉得比较好的方法,不足之处,还望大家批评指正.如果大家有更好的方法,希望可以分享. Solution1 Jeremy Keuth方案 Jeremy Keuth大叔在<JavaScript DOM 编程艺术>(第2版)(英文:DOM Scripting-Web Design wi
javascript跨浏览器的属性判断方法

今天在写代码的时候发现一个很容易出错的地方.当我们在声明变量时,常常会因为不同的 browser 有不同的 API 定义,然后用以下的写法来判断哪一个属性,例如: 复制代码代码如下: var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElement; 用||来检查要用哪一个 attribute.不过要小心 javascri
JavaScript实现跨浏览器的添加及删除事件绑定函数实例

本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************
javascript cookie的基本操作（添加和删除）

javascript cookie的基本操作(添加和删除) 1.添加一个cookie:response.addCookie(Cookie c); 2.获取cookie集合: request.getCookies(); 3.新建一个cookie: new Cookie(String name,String value) - Cookie在构造的时候就需要设定好cookie的名字和值 4.获取cookie的名字:cookie.getName(); 5.获取cookie的值:cookie.getVal
JavaScript实现添加及删除事件的方法小结

本文实例总结了JavaScript实现添加及删除事件的方法.分享给大家供大家参考.具体如下: JavaScript添加.删除事件的方法,也就是让某些方法生效指定次数,可以是一次.两次或更多次,但指定次数执行完毕后就删除该方法,使其失效,如果你经常从事JS编程,你就会知道这种功能用得比较多. 先来看看一个比较简单的例子: function $(id) { return document.getElementByIdx_x(id); } var ev = null; var count1 = 0;
Angular动态添加、删除输入框并计算值实例代码

Angular动态添加.删除输入框并计算值实例代码摘要: 在学习群中交流时,有人分享了一个动态添加输入框的方法,我在其基础上进行了一些改进这个功能本身并不复杂,但还是要注意,每个ng-model的对象必须是不同的,这样才能把它们分隔开. 下面是完整代码: JS: angular.module("myApp",[]) .controller("inputController",function($scope){ $scope.items=[]; //初始化数组,以
JavaScript实现为指定对象添加多个事件处理程序的方法

本文实例讲述了JavaScript实现为指定对象添加多个事件处理程序的方法.分享给大家供大家参考.具体如下: 如果你希望对象点击的时候同时处理多个事情,可以使用下面的代码 /* Start of the multihandle Object...*/ function MultiHandle(owner){ var my_handlers = new Array(); var my_owner = owner; this.append = function(handler){ my_handle
Jquery实现select multiple左右添加和删除功能的简单实例

项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的. 具体代码如下: <center> <table> <tr align="center"> <td colspan="3"> 选择 </td> &
兼容浏览器的js事件绑定函数(详解)

因为javascript中所有对象都集成与Object,那么只有给Object原型添加一个事件绑定函数,就不需要在处理绑定事件的时候,每次写一长串代码,直接调用即可.在代码中添加红色部分代码,直接便可以在代码中直接调用 <div id="mydiv" style="cursor:pointer; background-color:#F00">nihaoa</div> <script language="javascript&q
详细解读JavaScript的跨浏览器事件处理

一.关于获取事件对象 FF有点倔强,只支持arguments[0],不支持window.event.这次真的不怪IE,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了,只有FF这么多年了还是特立独行.所以,跨浏览器的事件对象获取有以下两种方式: 带参的: getEvent : function(event){ return event ? event : window.event; //return event || window.event;//或者更简单的方式
jQuery实现动态添加和删除input框代码实例

本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s
JavaScript中对象属性的添加和删除示例

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 用.为对象添加属性用关键字delete删除属性用[]添加属性和.的不同 r.name==r["name

JavaScript实现跨浏览器的添加及删除事件绑定函数实例

相关推荐

随机推荐