通用的事件侦听器函数

浅浅的花香味﹌ 2022-10-22 15:47 118阅读 0赞

**鉴于IE浏览器与普通浏览器在dom事件上的区别，特此封装一个事件监听函数来兼容彼此之间的却别。**

const EventUtils = { 
      // 视能力分别使用dom0||dom2||IE方式 来绑定事件
      // 添加事件
      addEvent: function(element, type, handler) { 
        if (element.addEventListener) { 
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent) { 
          element.attachEvent("on" + type, handler);
        } else { 
          element["on" + type] = handler;
        }
      },
    
      // 移除事件
      removeEvent: function(element, type, handler) { 
        if (element.removeEventListener) { 
          element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) { 
          element.detachEvent("on" + type, handler);
        } else { 
          element["on" + type] = null;
        }
      },
    
      // 获取事件目标
      getTarget: function(event) { 
        return event.target || event.srcElement;
      },
    
      // 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event
      getEvent: function(event) { 
        return event || window.event;
      },
    
      // 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获）
      stopPropagation: function(event) { 
        if (event.stopPropagation) { 
          event.stopPropagation();
        } else { 
          event.cancelBubble = true;
        }
      },
    
      // 取消事件的默认行为
      preventDefault: function(event) { 
        if (event.preventDefault) { 
          event.preventDefault();
        } else { 
          event.returnValue = false;
        }
      }
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

相关事件绑定、事件传播、事件捕获、事件冒泡、自定义事件 == js中事件委托 == 封装一个通用的事件绑定函数

事件绑定、事件传播、事件捕获、事件冒泡、自定义事件 DOM事件三种级别 DOM0级事件 DOM0 级时间分两种，一是直接在标签内直接添加执行语句，二是定义执

Bertha 。/ 2022年12月27日 07:28/ 0 赞/ 149 阅读

相关封装一个通用的事件绑定函数

通过上节案例来展开案例需要点击每个a，来。弹出他们的内容 <div id="div3"> <a href="">a1</a><br>

小灰灰/ 2022年12月18日 06:54/ 0 赞/ 144 阅读

相关 watch 侦听器

[vue官方文档-watch讲解][vue_-watch] Vue中计算属性和watch的区别侦听字符串和侦听对象的属性用法的区别第 1 章：watch 侦听

快来打我*/ 2022年11月02日 00:55/ 0 赞/ 146 阅读

相关 watch 侦听器

[vue官方文档-watch讲解][vue_-watch] `侦听字符串` 和 `侦听对象的属性` 的区别第 1 章：watch 侦听器基本用法 <tem

电玩女神/ 2022年11月02日 00:00/ 0 赞/ 169 阅读

相关通用的事件侦听器函数

鉴于IE浏览器与普通浏览器在dom事件上的区别，特此封装一个事件监听函数来兼容彼此之间的却别。 const EventUtils = { // 视能力分

浅浅的花香味﹌/ 2022年10月22日 15:47/ 0 赞/ 119 阅读

相关 oracle函数——通用函数

Oracle函数——通用函数 1. NVL(express1，express2): 如果第一个表达式为空，则显示第二个表达式的值；

红太狼/ 2022年06月07日 01:22/ 0 赞/ 224 阅读

相关读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得

今天读了《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）部分的内容，总结一些自己的心得：事

电玩女神/ 2022年06月01日 13:11/ 0 赞/ 204 阅读

相关 Oracle：通用函数

通用函数，及参数类型可以是number、varcher2、date。 1、NVL(a,b)函数：若a为null，则取b的值；若a不为null，则取a的值。 2、NVL2(a

ゝ一世哀愁。/ 2022年05月25日 08:45/ 0 赞/ 186 阅读

相关 Javascript通用函数

1 ![None.gif][] window.onerror = ScriptErrorReport; 2 ![None.gif][] // window.one

野性酷女/ 2022年01月10日 16:21/ 0 赞/ 215 阅读

相关 Vue侦听器

侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要

古城微笑少年丶/ 2021年10月20日 00:26/ 0 赞/ 272 阅读