easy

DocsVersion : 1.0.0

one( type, [ selector, extraData ], handle )

原型方法Define in : event.js

给匹配元素绑定一个一次性事件,事件触发后就会卸载该事件,同 on 的绑定规则一样。

参数
  • type
    String
    必需

    事件类型,不仅仅是原生的事件类型,也可以是自定义的事件类型,自定义事件类型可以使用 fire 来触发。可以是多个事件类型,多个时的参数使用空格隔开,多个事件类型共享一个事件处理函数。
    支持事件命名空间,比如 click.custom,click 是事件类型,custom 就是命名空间,事件命名空间对于卸载事件和触发事件很有用。

  • selector
    String
    可选

    事件代理时,触发事件的 DOM 元素的选择器,该选择器只支持基本选择器。

  • extraData
    Object
    可选

    传递给 Event 接口对象的附加数据,当你想给事件处理函数内部传递一个参数时,这会很有用,这样就不会破坏了原函数的结构,否则要给函数传递参数又得封装一个函数。如果使用 fire 方法来触发该事件,fire 方法传递过来的数据会和该数据合并,如果有同名数据 fire 将会覆盖 on 的附加数据。

  • handle
    Function
    必需

    事件处理函数,该函数接受一个 Event 接口对象的参数,该函数的 this 始终指向绑定了该函数 DOM 元素。

返回值
  • easyJS Object

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

例子1

给 div 元素绑定一个一次性的 click 事件。

box1
<div id="box1">box1</div>
E( '#box1' ).on( 'click', function(){
    alert( 'hello' );
});

运行

例子2

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

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

运行

例子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>' );
});

运行

例子4

给 div 元素同时绑定一个一次性事件,并传递一个参数给事件处理函数。

box3
<div id="box3">box3</div>
E( '#box3' ).on( 'click', { foo : 'bar' }, function( e ){
    alert( e.extraData.foo );
});

运行