easy

DocsVersion : 1.0.0

un( type, [ selector, handle ] )

原型方法Define in : event.js

on 是绑定事件,un 就是卸载事件。如果要卸载代理事件,必须要有 selector 参数。

参数
  • type
    String
    必需

    需要卸载的事件类型,多个事件类型可以用空格隔开,这样就可以卸载多个事件类型的所有的事件处理函数。如果包含了命名空间,将只卸载指定的事件。

  • selector
    String
    可选

    卸载代理事件,必须要有该参数。

  • handle
    Function
    可选

    卸载指定的事件处理函数,如果没有该参数将卸载该事件类型所有的事件处理函数。

返回值
  • easyJS Object

    返回 easyJS Object 自身,便于链式调用。

例子1

给 div 元素绑定两个 click 事件。

box1 点击运行触发事件
<div id="box1">box1 点击运行触发事件</div>
var sayHello1 = function(){
    alert( 'hello1' );
};

var sayHello2 = function(){
    alert( 'hello2' );
};

E( '#box1' ).on( 'click', sayHello1 )
    .on( 'click', sayHello2 );

绑定

卸载第一个事件处理函数。

E( '#box1' ).un( 'click', sayHello1 );

卸载

卸载所有该事件类型的事件处理函数。

E( '#box1' ).un( 'click' );

卸载

例子2

给 div 元素同时绑定一个 mouseover 和 mouseout 事件。

box2 mouseover 和 mouseout 触发事件
<div id="box2">box2 mouseover 和 mouseout 触发事件</div>
var count = 0;
E( '#box2' ).on( 'mouseover mouseout', function(){
    E( this ).text( 'fire_' + (++count) );
});

绑定

同时卸载两个事件类型的所有事件处理函数。

E( '#box2' ).un( 'mouseover mouseout' );

卸载

例子3

给 ul 元素绑定一个代理事件,使其所有的 li 元素都能响应事件。事件代理的好处是,不管元素是否已经存在于页面中还是动态添加的都可以响应事件,并且如果有很多个元素要绑定相同的事件只需绑定一次即可。

  • item1 span1
  • item2 span2
  • item3 span3
<ul id="demoList1">
    <li>item1 <span>span1</span></li>
    <li>item2 <span>span2</span></li>
    <li>item3 <span>span3</span></li>
</ul>
var demoList1 = E( '#demoList1' );
demoList1.on( 'click', 'li', function(){
    var len = demoList1.children().length + 1;
    
    demoList1.append( '<li>item' + len + ' <span>span' + len + '</span></li>' );
});

绑定

要卸载代理事件必须有原 selector 参数。

E( '#demoList1' ).un( 'click', 'li' );

卸载

例子4

给 div 元素绑定两个 click 事件,其中一个包含了事件命名空间。

box3 点击运行触发事件
<div id="box3">box3 点击运行触发事件</div>
E( '#box3' ).on( 'click.test1', function(){
        alert( 'hello1' );
    })
    .on( 'click', function(){
        alert( 'hello2' );
    });

绑定

卸载第一个事件处理函数,在有有命名空间的情况下,可以不传指定的函数名。

E( '#box3' ).un( 'click.test1' );

卸载