30-高级事件

最新推荐文章于 2022-03-31 21:22:12 发布

会编程的阿强

最新推荐文章于 2022-03-31 21:22:12 发布

阅读量300

点赞数

分类专栏： JQuery和Ajax

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/53195938

版权

JQuery和Ajax 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

模拟事件（模拟用户的操作，如点击事件）

$(document).ready(function(){
  $('input').on('click',function(e){
    alert('触发模拟事件！');
   });
  $('input').trigger('click');
});

或者
$(document).ready(function(){
 $('input').on('click',function(e,data1,data2,data3){
           alert('a|'+data1+'|'+data2[1]+'|'+data3.user);
}).trigger('click',[123,[23,'b'],{user:'hu'}]);
});

trigger('click',123,'abc')表示给事件传值。

//trigger的简写方法
$(document).ready(function(){
 $('input').on('click',function(e){
           alert('a');
}).click();
});

trigger和triggerHandler的区别
$(document).ready(function(){
    //trigger提交后跳转，没有组织默认行为
  // $('form').trigger('submit');
    //trigger提交后没有跳转，默认行为被阻止了
   $('form').triggerHandler('submit');
});

$(document).ready(function(){
    //trigger会执行所有的
  // $('input').trigger('submit');
    //trigger会执行第一个
   $('input').triggerHandler('submit');
});

trigger执行后返回jquery对象，triggerHandler返回方法的返回值

trigger会冒泡，triggerHandler不会冒泡

二、命名空间

想要移除一个事件的时候，由于是匿名函数，加上命名空间，可以精确的移去事件。

$(document).ready(function(){
  $("input").on('click.a',function(){
    alert(1);
  });
$("input").on('click.b',function(){
    alert(2);
  });
  $("input").on('test.a',function(){
    alert(3);
  });
 $('input').unbind('click.a');//$('input').die('click.a');
});

移除所有的.a可以使用$('input').unbind('.a');

三、动态绑定

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("body").on('mouseover','input',function(){
     $(this).clone().appendTo('body');
  });

});
</script>
</head>
<body>
<input type="button" class="test" value='button'/>
</body>
</html>

$("body").on('mouseover','input',function(){

要动态绑定事件的对象input，前面必须是他的父元素。

四、off移除事件，与on对应

$('input').off('click');

五、仅一次事件触发one

 $("input").off('click.a',function(){
    alert(1);
  });

支持点击一次，第二次就无效了。

会编程的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
30-高级事件

模拟事件（模拟用户的操作，如点击事件）$(document).ready(function(){ $('input').on('click',function(e){ alert('触发模拟事件！'); }); $('input').trigger('click');});或者$(document).ready(function(){ $('input').
复制链接

扫一扫