美文网首页
js 基础知识2 - 事件侦听器

js 基础知识2 - 事件侦听器

作者: 时光慢慢些 | 来源:发表于2017-05-18 22:04 被阅读49次

写一个通用的事件侦听器函数

// event(事件)工具集,来源:github.com/markyun  
  markyun.Event = {  
      // 页面加载完成后  
      readyEvent : function(fn) {  
          if (fn==null) {  
              fn=document;  
          }  
          var oldonload = window.onload;  
          if (typeof window.onload != 'function') {  
              window.onload = fn;  
          } else {  
              window.onload = function() {  
                  oldonload();  
                  fn();  
              };  
          }  
      },  
      // 视能力分别使用dom0||dom2||IE方式 来绑定事件  
      // 参数: 操作的元素,事件名称 ,事件处理程序  
      addEvent : function(element, type, handler) {  
          if (element.addEventListener) {  
              //事件类型、需要执行的函数、是否捕捉  
              element.addEventListener(type, handler, false);  
          } else if (element.attachEvent) {  
              element.attachEvent('on' + type, function() {  
                  handler.call(element);  
              });  
          } else {  
              element['on' + type] = handler;  
          }  
      },  
      // 移除事件  
      removeEvent : function(element, type, handler) {  
          if (element.removeEnentListener) {  
              element.removeEnentListener(type, handler, false);  
          } else if (element.datachEvent) {  
              element.detachEvent('on' + type, handler);  
          } else {  
              element['on' + type] = null;  
          }  
      },   
      // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)  
      stopPropagation : function(ev) {  
          if (ev.stopPropagation) {  
              ev.stopPropagation();  
          } else {  
              ev.cancelBubble = true;  
          }  
      },  
      // 取消事件的默认行为  
      preventDefault : function(event) {  
          if (event.preventDefault) {  
              event.preventDefault();  
          } else {  
              event.returnValue = false;  
          }  
      },  
      // 获取事件目标  
      getTarget : function(event) {  
          return event.target || event.srcElement;  
      },  
      // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;  
      getEvent : function(e) {  
          var ev = e || window.event;  
          if (!ev) {  
              var c = this.getEvent.caller;  
              while (c) {  
                  ev = c.arguments[0];  
                  if (ev && Event == ev.constructor) {  
                      break;  
                  }  
                  c = c.caller;  
              }  
          }  
          return ev;  
      }  
  };  

相关文章

  • js 基础知识2 - 事件侦听器

    写一个通用的事件侦听器函数

  • Egret事件机制

    事件的流程 Egret事件机制包含四个步骤:注册侦听器,发送事件,侦听事件,移除侦听器。且是按顺序执行。 注册侦听...

  • 试题3

    写一个通用的事件侦听器函数 Node.js 的适用场景 高并发 聊天 实时消息推送 JavaScript 原型,原...

  • JS异步那些事 一 (基础知识)

    JS异步那些事 一 (基础知识)JS异步那些事 二 (分布式事件)JS异步那些事 三 (Promise)JS异步那...

  • JS异步那些事 三 (Promise)

    JS异步那些事 一 (基础知识)JS异步那些事 二 (分布式事件)JS异步那些事 三 (Promise)JS异步那...

  • JS异步那些事 四(HTML 5 Web Workers)

    JS异步那些事 一 (基础知识)JS异步那些事 二 (分布式事件)JS异步那些事 三 (Promise)JS异步那...

  • JS异步那些事 二 (分布式事件)

    JS异步那些事 一 (基础知识)JS异步那些事 二 (分布式事件)JS异步那些事 三 (Promise)JS异步那...

  • JS异步那些事 五 (异步脚本加载)

    JS异步那些事 一 (基础知识)JS异步那些事 二 (分布式事件)JS异步那些事 三 (Promise)JS异步那...

  • DOM事件(一)

    JavaScript使用侦听器来订阅事件,实现与HTML之间的交互。 DOM2级规范开始尝试标准化DOM事件。主流...

  • 事件

    题目1: DOM0 事件和DOM2级在事件监听使用方式上有什么区别? 事件处理程序我们也称之为事件侦听器(list...

网友评论

      本文标题:js 基础知识2 - 事件侦听器

      本文链接:https://www.haomeiwen.com/subject/chdexxtx.html