zoukankan      html  css  js  c++  java
  • js监听事件

    js监听事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>监听测试</title>
    </head>
    
    <body>
    <script type="text/javascript">
    /*
     * 添加事件监听函数
     * obj        要添加监听的对象或元素
     * eventName  事件名
     * fun        监听函数的名称
     * param      给监听函数传的参数,这里就传了一个参数
     */
    function addEventHandler(obj,eventName,fun){
        var fn = fun;
       
        if(obj.attachEvent){
            obj.attachEvent('on'+eventName,fn);
        }else if(obj.addEventListener){
            obj.addEventListener(eventName,fn,false);
        }else{
            obj["on" + eventName] = fn;
        }
    }
     /*
     * 删除事件监听函数
     * obj        要添加监听的对象或元素
     * eventName  事件名
     * fun         监听函数的名称
     */
    function removeEventHandler(obj, eventName, fun) {
        if (obj.removeEventListener)
            obj.removeEventListener(eventName, fun, false);
        else if (obj.detachEvent)
            obj.detachEvent("on" + eventName, fun);
        else delete obj["on" + eventName];
    }
    
    
    var te1=function (){
        alert('hello world')
        }
    function delte1(){
        var obj=document.getElementById("test");
         removeEventHandler(obj,'click',te1);
        }
        
        
    window.onload=function(){
        var te=document.getElementById("test");
        addEventHandler(te,'click',te1);
        
        }
        
    </script>
    
    <a href="javascript:;" id="test" > 测试监听</a>  <a href="javascript:;" onclick="delte1();"> 删除监听</a>
    </body>
    </html>

     或者:

    // 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;
          }
      };
    

      

  • 相关阅读:
    【入门】WebRTC知识点概览 | 内有技术干货免费下载
    mysql数据库运维方案
    前端报504错误如何定位
    Python数据分析之双色球高频数据统计
    利用Dapper ORM搭建三层架构
    ASP.NET和IIS工作原理
    C#中的new修饰符
    .NET 三层架构的简单规划
    Docker Hub中拉取镜像时出现超时问题该如何做?
    项目组件:分页(pagination)
  • 原文地址:https://www.cnblogs.com/hnwty/p/4218599.html
Copyright © 2011-2022 走看看