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

作者:青岛澄润国际贸易有限公司 来源:www.usabcc.com 发布时间:2017-09-05 11:59:22
jquery-event(事件)-on()方法

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()) ; }); });

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

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. });

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:黄石网站制作 http://huangshi.666rj.com

  • 上一篇:.NET应用架构设计—表模块模式与事务脚本模式的代码编
  • 下一篇:最后一页
  •