detach

Module

Methods

event.detach()
void detach ( selector [ , eventType , fn , scope ] )
从符合匹配的 dom 节点中移去相应事件的事件处理器
Parameters:
  • selector (string|HTMLCollection|Array<HTMLElement>) – 字符串表示 css3 选择器
  • eventType (string) – 包含一个或多个事件名称的字符串, 多个事件名以空格分开, 也可以包含事件分组,例如 “click.one” , ”.two” 等
  • fn (function(eventObject)) – 绑定事件时的回调函数
  • scope (object) – 绑定的事件处理器的对应 this 值

on 绑定的事件处理器可以用 detach 解除绑定. 最简单的情况 detach(elem) 解除该元素上的所有绑定.

Event.detach('#foo');

上面的代码解除了 foo 元素上所有事件的事件处理器, 我们也可以解除某一个事件的全部事件处理器:

Event.detach('#foo','click');

当时如果程序对同一事件指定了不同的事件处理器, 这时就需要后面两个参数了

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
Event.on('#foo','click', handler);
Event.detach('#foo','click', handler);

通过指定第三个参数, 我们可以保证该事件的其他事件处理器不受影响, 注意下面的代码则不会生效:

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
var obj={x:1};
Event.on('#foo','click', handler,obj);

Event.detach('#foo','click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
},obj);

Event.detach('#foo','click', handler,{x:1});

虽然后面的两个 detach 参数从字面上来看完全一样, 但是由于是不同的对象, 所有仍然不会生效. 如果需要解除特定的事件处理器, 我们需要同一个对象( 函数 )引用, 而不是恰好字面上相同的不同对象.

Note

Event.detach 支持 deep ,递归移除子节点事件

Event.detach(document.body,{
    'click':{
        deep:true
    }
});
Event.detach(document.body,{
    // 全部事件
    '':{
        deep:true
    }
});
event.remove()
void remove ( selector , eventType , fn , scope )
detach() 的别名

Note

如果要解除特定的事件处理器 , detach 的参数必须和对应的 on 参数值相等( == )并且个数一致才能完成解除绑定的目标.

Demo

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            margin: 5px;
        }

        button#theone {
            color: red;
            background: yellow;
        }
    </style>
    <script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
    KISSY.use('core', function (S) {
        var $ = KISSY.Node.all;

        function aClick() {
            $("div").show().fadeOut();
        }

        $("#bind").on('click', function () {
            // could use .bind('click', aClick) instead but for variety...
            $("#theone").on('click', aClick)
                    .text("Can Click!");
        });
        $("#unbind").on('click', function () {
            $("#theone").detach('click', aClick)
                    .text("Does nothing...");
        });
    });
</script>

</body>
</html>