yishuixs 2015-09-08 07:29 采纳率: 100%
浏览 1514
已采纳

JS事件处理函数的一些问题

现代的事件处理函数,其递归的原理是什么?
我写了一个事件切换器,原始的一个div颜色为红色,点击后变成蓝色,再点击又变成红色,就这样切换。代码如下:
HTML代码:

<head>
    <style type="text/css">
        #box{
            width:100px;
            height:100px;
        }
        .red{
            background-color:red;
        }
        .blue{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div id="box" class="red">颜色切换器</div>
</body>

JS代码:

 //事件添加函数
 function addEvent(obj, type, fn){
     var saved = null;
     if(obj.type){
        saved = obj.type;
     }
     obj.type = function(){
        if(saved) saved();
        fn.call(this);
     };
 }

 //事件删除函数
 removeEvent(obj, type){
     if(obj.type) obj.type = null;
 }

 //颜色切换函数
 function toBlue(){
     this.className = 'blue';
     removeEvent(this, 'onclick');
     addEvent(this, 'onclick', toRed);
 }

 function toRed(){
     this.className = 'red';
     removeEvent(this, 'onclick');
     addEvent(this, 'onclick', toBlue);
 }

 //开始执行
 addEvent(window, 'onload', function(){
     var box = document.getElementById('box');
     addEvent(box, 'onclick', toBlue);
 });

当开始执行时,首先点击了div,颜色变蓝,再点击就变红,切换时的运行机理是什么?为何点击后还能继续成功点击?

  • 写回答

1条回答 默认 最新

  • threenewbee 2015-09-08 08:37
    关注

    这个和什么递归扯不上关系,无非就是你点了一次,它执行设置颜色的代码,并且把事件关联的处理函数设置为另一个,而另一个函数再设置回来。
    remoteevent和addevent就是切换事件。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题