封装了一个支持匿名函数的Javascript事件监听器
关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的,只不过在取消事件绑定上面做了点手术,现在可以支持匿名函数的使用,所以在绑定事件的时候不再需要给函数单独命名了。
/*绑定事件与取消绑定*/
var handleHash = {};
var bind = (function() {
if (window.addEventListener) {
return function(el, type, fn, capture) {
el.addEventListener(type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
}, capture);
};
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(){
fn();
handleHash[type] = handleHash[type] || [];
handleHash[type].push(arguments.callee);
});
};
}
})();
var unbind = (function(){
if (window.addEventListener) {
return function(el, type ) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.removeEventListener(type, handleHash[type][i]);
}
};
};
} else if (window.attachEvent) {
return function(el, type) {
if(handleHash[type]){
var i = 0, len = handleHash[type].length;
for (i; i<len ; i += 1){
el.detachEvent("on" + type, handleHash[type][i]);
}
};
};
}
})();
原理解析:
handleHash做哈希表缓存事件的function,handleHash['事件名称']是一个数组,来添加多个事件监听的方法,unbind哪个事件的时候遍历handleHash['事件名称']的数组,然后移除。
bind(obj,'click',function(){
alert ('click');
});
unbind(obj,'click');
相关推荐
-
js循环动态绑定带参数函数遇到的问题及解决方案[转]
众所周知,不带参数的绑定非常简单,只要使用(语法:"document.getElementById("对象ID名").attachEvent("事件名,如onchange",函数名);")(示例:"document.getElementById("select_0").attachEvent("onchange",modifyFunction);")即可.(注:以下只写示例) 带参数的绑
-
js使用函数绑定技术改变事件处理程序的作用域
第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程
-
javascript中的绑定与解绑函数应用示例
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene
-
javascript 解决表单仍然提交即使监听处理函数返回false
复制代码 代码如下: <form action="http://www.jb51.net" id="form"> <input type="text" /> <input type="submit" /> </form> <script> var code = function () { return false; }; var element = window.do
-
详解JavaScript函数绑定
复制代码 代码如下: <body> <input id="btnTest" type="button" value="Button"/> <script type="text/javascript"> var handler={ message:"Event handled.",
-
JS 事件绑定函数代码
主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌(废话) IE浏览器里,this指向问题. 直接上代码吧! 复制代码 代码如下: var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent("on"+type,(function(){ return function(event){ window.event.cancelBubble=true;//停止时间冒泡 o
-
JavaScript 事件属性绑定带参数的函数
例如不能采用这种调用方式:element.onclick = test();element.onclick = test(arg1,arg2);只能通过element.onclick = function(){ ... };或者element.onclick = test这种方式来实现,所以无法给函数传递参数.参考了大量的网上资料,解决这个问题的方式,以代码为例,如下所示: 复制代码 代码如下: function Handler() { }; Handler.prototype = { /* *
-
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************
-
JavaScript为事件句柄绑定监听函数实例详解
本文实例讲述了JavaScript为事件句柄绑定监听函数的方法.分享给大家供大家参考,具体如下: 在JavaScript中为Dom元素绑定事件监听函数是一件非常常见的事情,但这里也有许多的Bug.各种浏览器对于事件绑定都提供了很多方法,但可靠的只有3中: 1.传统的绑定方法: elem.onclick = function( event ){ alert(event.type + 'this.innerHTML'); }; a.传统的绑定方法,非常简单稳定,函数体内的this指向的也是指向正在处
-
封装了一个支持匿名函数的Javascript事件监听器
关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善.下面的方法中对于添加事件监听的方法是一样的,只不过在取消事件绑定上面做了点手术,现在可以支持匿名函数的使用,所以在绑定事件的时候不再需要给函数单独命名了. 主要代码: 复制代码 代码如下: /*绑定事件与取消绑定*/var handleHash = {};var bind = (function() { if (windo
-
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
PHP 跳转,即重定向浏览器到指定的 URL,是一个很常见的功能.这种功能也有一些细节性的要求,比如等待多少秒以后跳转,用不用JavaScript实现跳转,等等.下面的跳转方法考虑到很多,并参数化,可以用到具体的项目当中. <?php /** * 重定向浏览器到指定的 URL * * @param string $url 要重定向的 url * @param int $delay 等待多少秒以后跳转 * @param bool $js 指示是否返回用于跳转的 JavaScript 代码 * @p
-
JavaScript匿名函数用法分析
本文实例讲述了JavaScript匿名函数用法.分享给大家供大家参考.具体如下: 一.定义一个函数 在JavaScript中,可以通过"函数声明"和"函数表达式"来定义一个函数,比如 1.通过"函数声明"来定义一个函数 function t1(){} 2.通过"函数表达式"来定义一个函数 t2 = function(){} 但是两种方式定义函数,效果是不同的 t1是函数声明,'词法分析'时,AO.t1 = function()
-
不使用 JS 匿名函数理由
匿名函数的基本形式为(function(){...})(); 前面的括号包含函数体,后面的括号就是给匿名函数传递参数并立即执行之 匿名函数的作用是避免全局变量的污染以及函数名的冲突 无论你在什么时候读代码,您都必须注意到匿名函数.有时它们被称为 lambda,有时是匿名函数,不管怎样,我认为他们是不好使用的. 如果你不知道匿名函数是什么,这里有一个引语: 匿名函数是一种在运行时动态声明的函数.它们之所以被称为匿名函数是因为不同于普通函数,它们并没有函数名 . - Helen Emerson, H
-
秒懂Golang匿名函数
上篇文章给大家介绍了go语言匿名函数的使用 需要的朋友点击查看.今天给大家介绍Golang匿名函数的相关知识,具体内容如下: 概念 所谓匿名函数,就是没有名字的函数 匿名函数(英语:Anonymous Function)在计算机编程中是指一类无需定义标识符(函数名)的函数或子程序,普遍存在于多种编程语言中.---wikipedia Golang是支持匿名函数的,即在需要使用函数时,再定义函数,匿名函数没有函数名,只有函数体,函数可以被作为一种类型被赋值给函数类型的变量,匿名函数往往以变量方式被传
-
javascript事件的绑定基础实例讲解(34)
本文实例为大家分享了js事件绑定的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var btn01 = document.getElementById("btn01&quo
-
浅析JavaScript事件和方法
单击一个超链接触发事件 1.用a标签的onclick <a href="#" onclick="js代码"> 这种写法呢,存在一种弊端,就是点击后会刷新一次页面,回到页面顶端. 想不刷新如何做的呢? 复制代码 代码如下: <a href="javascript:void(0)" onclick="js代码"> 2.#与javascript:void(0)的区别 超链接为"死链"时,使
-
Javascript匿名函数的一种应用 代码封装
在一些Javascript库中可以看见这种写法: 复制代码 代码如下: (function(){ //所有库代码代码 })(); 说实话,对于js初学者的我来说.这个东西太吓人了,在这些JS库中,这个函数基本上把整个库的所有代码全括起来了,这种写法完全超越了我的常识.难道不应该好好的划分一下吗,难道不应该体现出层次和功能划分吗,怎么会一个函数搞定呢.我一开始完全不敢去细想它的道理.直到使用JS一段时间后,某一天一位同事在闲聊时说起了这个问题,我才知道这个叫匿名函数.匿名函数我并不陌生,C#,Py
-
Javascript中的匿名函数与封装介绍
迷惑了一会儿不同JS库的封装后,终于有了点头绪.大致就是: 复制代码 代码如下: 创建一个自调用匿名函数,设计参数window,并传入window对象. 而这个过程的目的则是, 复制代码 代码如下: 使得自身的代码不会被其他代码污染,同时也可以不污染其他代码. jQuery 封装 于是找了个早期版本的jQuery,版本号是1.7.1里面的封装代码大致是下面这样的 复制代码 代码如下: (function( window, undefined ) { var jQuery = (function(
-
一个关于javascript匿名函数的问题分析
匿名函数,就是没有名字的函数.如: 复制代码 代码如下: function (){ alert('a function'); } 但是,上面的代码会报错.firebug提示:function statement requires a name,也就是:函数必须要有个名字. 奇怪的是,如果我用一对()把这个没有名字的函数包起来,就不会报错了.如: 复制代码 代码如下: (function (){ alert('a function'); }) (注意包裹函数的()!).虽然这样不会报错,但谁能知道
随机推荐
- Go语言排序算法之插入排序与生成随机数详解
- 详解vue.js 开发环境搭建最简单攻略
- Linux Redis 的安装步骤详解
- jQuery表格行上移下移和置顶的实现方法
- jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
- 深入解析AngularJS框架中$scope的作用与生命周期
- 解析iOS开发中的FirstResponder第一响应对象
- asp.net中倒计时自动跳转页面的实现方法(使用javascript)
- php smarty截取中文字符乱码问题?gb2312/utf-8
- MySQL高速缓存启动方法及参数详解(query_cache_size)
- 如何使用PHP中的字符串函数
- node.js中的fs.lchmodSync方法使用说明
- 在JSP中访问数据库大全
- 编写Python脚本把sqlAlchemy对象转换成dict的教程
- java poi读取excel操作示例(2个代码)
- Windows平台下MySQL安装与配置方法与注意事项
- Linux服务器编程之utime()函数修改文件存取时间
- jQuery中$(function() {});问题详解
- js定时显示广告的实现代码[已测]
- java转发和重定向的区别