当前位置: 首页 > 编程笔记 >

封装了一个支持匿名函数的Javascript事件监听器

柳才良
2023-03-14
本文向大家介绍封装了一个支持匿名函数的Javascript事件监听器,包括了封装了一个支持匿名函数的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');

 类似资料:
  • 本文向大家介绍使用匿名函数的JavaScript封装,包括了使用匿名函数的JavaScript封装的使用技巧和注意事项,需要的朋友参考一下 面向对象的编程语言允许使用私有字段隐藏数据。他们使用这些来隐藏类的内部。在JS中,没有这样的构建支持来隐藏/封装内部工作。 我们有Anonymous函数,可以为您封装JS。让我们看一个例子- 示例 如果我们将上面的代码公开地写出来,则此代码将使用这些名称污染全

  • 问题内容: 无论如何,要删除这样添加的事件侦听器: 不更换元素? 问题答案: 除非您在创建时存储了对事件处理程序的引用,否则无法彻底删除事件处理程序。 我通常会将它们添加到该页面上的主要对象中,然后在处理完该对象后可以对其进行迭代和清理。

  • 问题内容: 摘要 您能解释JavaScript中封装的匿名函数的语法背后的原因吗?为什么起作用:但这不起作用? 我知道的 在JavaScript中,将创建一个命名函数,如下所示: 您还可以创建一个匿名函数并将其分配给变量: 您可以通过创建一个匿名函数来封装代码块,然后将其包装在方括号中并立即执行: 在创建模块化脚本时,这很有用,以避免因潜在冲突的变量而使当前范围或全局范围混乱(例如Greasemo

  • 本文向大家介绍自己封装的javascript事件队列函数版,包括了自己封装的javascript事件队列函数版的使用技巧和注意事项,需要的朋友参考一下 背景 javascript中使用addEventListener()或attachEvent()绑定事件时会有几个小问题: 一、使用addEventListener()或attachEvent()添加的匿名函数无法移除。 二、ie6-ie8中,使用

  • 在开发一个谷歌浏览器插件, 已有的功能都是通过点击按钮实现的 : 界面内有很多按钮,每个对应不同的功能。所以直接监听了整个document的click事件。 document.addEventListener('click'...) 现在想在插件界面内加一个checkbox,发现它的监听事件没有起作用,checkbox无法勾选。 用onclick实现也不行。 但是如果把document.addEv

  • ts创建一个Input,添加事件监听器,函数类型报错?