zoukankan      html  css  js  c++  java
  • 【分享】JS添加/删除事件处理函数(支持IE,FF,opera,safari)

    说明:本文为《JavaScript高级程序设计》第9章中的跨平台事件中的部分内容。

    JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件)。

    例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下:

    ==========================================

    <!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>
    <script type="text/javascript">
    var EventUtil=new Object;
    //oTarget:目标;sEventType:事件名称;funName:事件触发的函数名;
    EventUtil.addEvent=function(oTarget,sEventType,funName){
     //document.getElementById("dd").attachEvent
        if(oTarget.addEventListener){//for DOM;
      oTarget.addEventListener(sEventType,funName, false);
     }else if(oTarget.attachEvent){
      oTarget.attachEvent("on"+sEventType,funName);
     }else{
      oTarget["on"+sEventType]=funName;
     }
    };
    EventUtil.removeEvent=function(oTarget,sEventType,funName){
     //document.getElementById("dd").attachEvent
        if(oTarget.removeEventListener){//for DOM;
      oTarget.removeEventListener(sEventType,funName, false);
     }else if(oTarget.detachEvent){
      oTarget.detachEvent("on"+sEventType,funName);
     }else{
      oTarget["on"+sEventType]=null;
     }
    };
    function removeClick(){
     alert("click");
     var oDiv=document.getElementById("odiv");
     oDiv.style.cursor="auto";
     EventUtil.removeEvent(oDiv,"click",removeClick);
    }
    //----多个函数绑定到window.onload上------//
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload !="function"){
            window.onload=func;
        }else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }

    addLoadEvent(addClick);
    function addClick(){
     var oDiv=document.getElementById("odiv");
     oDiv.style.cursor="pointer";
     EventUtil.addEvent(oDiv,"click",removeClick);
    }
    </script>
    </head>

    <body>
    <p>第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了</p>
    <div id="odiv" style="background:#333; height:100px; 100px; margin:0 auto; color:#CDCDCD; ">第一次点我警告你,第二次点我不理你!</div>
    </body>
    </html>

    ==========================================

  • 相关阅读:
    centos7 安装中文编码
    docker一些命令
    bash: ifconfig: command not found
    sublime3的licence(update 2016-04-14)
    Mac下更改python版本为3.5
    BigDecimal的equals
    cvc-elt.1: 找不到元素 'beans' 的声明
    Configuration problem: Only one AsyncAnnotationBeanPostProcessor may exist within the context.
    You need tcl 8.5 or newer in order to run the Redis test
    自定义的类型转换器中怎样自定义错误消息?(待解答)
  • 原文地址:https://www.cnblogs.com/68681395/p/1272850.html
Copyright © 2011-2022 走看看