jquery-event(事件)-on()方法

页面导航:首页 > 网络编程 > JavaScript > jquery-event(事件)-on()方法

jquery-event(事件)-on()方法

来源: 作者: 时间:2016-01-19 18:32 【

jquery on()事件绑定方法的语法:其中[selector],[data]为可选,可以要也可以不要当你需要过滤(筛选)或者需要传递event data注:最后会单独说下event dataon(events,[selector],[data],fn)例子:$(fu

jquery on()事件绑定方法的语法:
其中[selector],[data]为可选,可以要也可以不要当你需要过滤(筛选)或者需要传递event.data
注:最后会单独说下event.data

on(events,[selector],[data],fn)

例子:

$(function(){
                 $(document).on('click','h1 span',function(){
                        alert($(this).text()) ;
                 });
});

HTML


div
div_id = odiv1
span

h1 span

on()多个事件绑定的方法
和前面差不多一样,只不过加了是多个空格

$(function(){
                 $(document).on('click mousemove','h1 span',function(){
                        alert($(this).text()) ;
                 });
});

代码段和前面一样
我还是复制过来吧


div
div_id = odiv1
span

h1 span

on()多个事件设置多个不同的效果:
jquery代码块:

$('span').on({
                    'click':function(){
                        console.log($(this).html()) ;
                    } ,
                    'mousemove':function(){
                        alert($('div').html());
                    }
 }) ;

html代码块:


div
div_id = odiv1
span

h1span

event.data单独讲解:

function myHandler(event) {
alert(event.data.foo);
};
$(h1 span).on(click, {foo: bar}, myHandler);

最后说下on()可以根据boolean的不同模拟jquery库中的某些事件方法
如:当’selector’为null时,on()和bind()差不多就是一样的了
当然也可以模拟live()方法
如:
live()写法:

$('#list li').live('click', '#list li', function() {
    //function code here.
}); 

on()写法

$(document).on('click', '#list li', function() {
    //function code here.
});

还可以替换替换delegate()
delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。
delegate()写法:


$('#list').delegate('li', 'click', function() {
    //function code here.
});

on()写法:


$('#list').on('click', 'li', function() {
    //function code here.
});

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<