zoukankan      html  css  js  c++  java
  • javascript事件对象之事件切换器

    html代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jstest</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
        
        <div id="box" class="red">测试div</div>
        
    </body>
    </html>

    css代码

    @charset "utf-8";
    .red{width:100px; height:100px; background:#f00;}
    .blue{width:100px; height:100px; background: blue;}

    js代码

    //跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){
            obj.attachEvent('on'+type,fn);
        }
    }
    
    //跨浏览器移除事件
    function removeEvent(obj,type,fn){
        if(obj.removeEventListener){
            obj.removeEventListener(obj,fn,false);
        }else if(obj.detachEvent){
            obj.detach('on'+type,fn);
        }
    }
    
    //跨浏览器获取目标对象
    function getTarget(evt){
        if(evt.target){            //w3c
            return evt.target;
        }else if(window.event.srcElement){
            return window.event.srcElement;
        }
    }
    
    addEvent(window,'load',function(){
        var box = document.getElementById('box');
        addEvent(box,'click',toBlue);
    });
    
    function toRed(evt){
        var that = getTarget(evt);
        that.className = 'red';
        removeEvent(that,'click',toRed);
        addEvent(that,'click',toBlue);
    }
    
    function toBlue(evt){
        var that = getTarget(evt);
        that.className = 'blue';
        removeEvent(that,'click',toBlue);
        addEvent(that,'click',toRed);
    }
  • 相关阅读:
    C#.NET.JSON库
    C# .NET 私钥 RSA2,SHA256,签名
    fiddler 捕捉不到代码发出去的HTTP请求
    双网卡共享上网
    json 反序列化成键值对
    C# .NET 杀进程
    docker in centos error
    深入理解磁盘文件系统之inode
    CentOS下安装高版本GCC
    Mac 使用 launchctl 定时运行程序(转载)
  • 原文地址:https://www.cnblogs.com/littlefly/p/3976106.html
Copyright © 2011-2022 走看看