jQuery高级事件

原创 2015年11月19日 18:30:22

  1. 操作模拟

    1trigger()

      不是人为的去点击,而是模拟人去点击。例如,当页面加载完成后,自动触发按钮操作

$('input').click(function(){alert("click!");});

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

额外数据获取

     $('input').click(function(e,data1,data2){

      alert(data1+"~"+data2);

      }).trigger('click',['123','456']);

      页面加载完成后自动弹出123~456trigger额外数据只有一条时候可以省略中括号,多条时不可省略

   $('input').click(function(e,data1,data2,data3,data4){   alert(data1+"~"+data2+"~"+data3[3]+"~"+data4.user);

 }).trigger('click',['123','456',['a','b','c','d'],{'user':'Lee'}]);

也可以通过自定义的事件触发

 

//自定义触发

$('input').bind('myEvent',function(){

      alert('hello');

     }).trigger('myEvent');

2triggerHandler()

trigger()用法一样,只是添加了一些方法。

  $('input').click(function(){

    alert("qqqqqqqqq!!!!");

}).triggerHandler('click');

trigger()的区别

(1)、不会执行默认事件

$('form').triggerHandler('submit');//不执行默认事件,提交后不跳转到另一个页面

$('form').trigger('submit');//执行默认事件,跳转到另一个页面

(2)triggerHandler()只是执行第一个元素,trigger()执行所有的元素

(3)trigger()返回的是jQuery对象,可以实现连缀

triggerHandler()返回return值或undefined

(4)trigger()在创建事件时会冒泡,但这种冒泡在自定义事件中才能体现出来;而triggerHandler()则不会冒泡

 

<div class="d1">

<div class="d2">

<div class="d3">

div

</div>

</div>

</div>

 

   $('div').bind('myEvent',function(){

      alert('hello');

   });

   $('.d3').trigger('myEvent');

//出现3alert

 

   $('div').bind('myEvent',function(){

      alert('hello');

   });

   $('.d3').triggerHandler('myEvent');

//出现一个alert

  1. 命名空间

   $('input').bind('click',function(){

    alert("abc");});

   $('input').bind('click',function(){

    alert("efg");});

 

   例如:当我们想要移除alertabcclick时,移除的方法只有   $('input').unbind('click');这样  两个click都移除了,不符合要求,因此可以用命名空间来解决问题

 

     $('input').bind('click.abc',function(){

    alert("abc");

});

     $('input').bind('click.efg',function(){

    alert("efg");});

移除: $('input').unbind('click.abc');

如此只移除了abc,并没有移除efg

也可以直接用(.abc),可以移除相同命名空间的不同事件。

trigger()triggerHandler()也可以使用命名空间

$(‘input’).trigger(‘click.abc’);

  1. 事件委托

    1

    <div id="box">

    <input type="button"  class="button" value="按钮">

    <input type="button"  class="button" value="按钮">

    <input type="button"class="button"  value="按钮">

    </div>

 

//事件不委托,绑定了3个事件

   $('.button').live(function(){

      alert("aaaaa");

   });

 

//事件委托,绑定了1个事件,live绑定的不是button,绑定的是document,永远只会绑定一个事件

   $('.button').live(function(){

      alert("aaaaa");

   });

2、动态绑定功能

//不能动态绑定

   $('.button').bind('click',function(){

      $(this).clone().appendTo('#box');

   });

//live可以动态绑定,因为事件绑定在document

//live实际上是绑定在document,而点击button实际上是冒泡到document上,并且点击document时,需要验证event.typeevent.target才能出发

$('.button').live('click',function(){

      $(this).clone().appendTo('#box');

   });

注意:live()不支持连缀调用

die()可以结束live()

由于live()存在很多问题,需要一层一层向上冒泡,复杂冗长,因此jQuery给我们提供了 一个更好的方法delegate()代替live()

$('#box').delegate('.button','click',function(){

      $(this).clone().appendTo('#box');

});

//语义清楚,绑定的为父元素,id=box,对button执行操作,click事件

$('#box').undelegate('.button','click');

//删除绑定

 

当有很多元素需要事件绑定时,建议使用事件委托

  1. onoffone

    总结一下以上学到的几种方法:

    普通绑定:bind   普通解绑:unbind

    事件委托:live(),delegate()   解除事件委托:die(),undelegate()

    在新版jQuery()中提供了新的方法:

    绑定:on()

    解绑:off()

   $('.button').on('click',{user:'lee'},function(e){

      alert(e.data.user);

      //alert('qqq');

});

//on代替普通绑定

 

 

$('.button').on('mouseover mouseout',function(){

      alert("1111");

});

 

   $('.button').on({

        mouseover:function(){

           alert("over!!!!!!");

        },mouseout:function(){

           alert("out!!!!!!!!");

      }});

//on代替普通的多事件绑定

 

   $('#box').on('click','.button',function(){

      $(this).clone().appendTo('#box');

});

//on代替live()delegate()d的事件委托

 

$('form').on('submit',function(){

      return false;});

也可以写成$('form').on('submit',false);

//阻止了默认行为和冒泡行为

 

   $('#box').off('click','.button');

//移除委托事件

off用法与unbind相同

 

one:绑定元素执行完毕后,执行自动移除事件,该方法可以用于只触发一次的事件

   $('.button').one('click',function(){

      alert("only one");

   });

//只触发一次,警示框只弹出一次

$('#box').one('click','.button',function(){

      $(this).clone().appendTo('#box');

   });

//委托事件,按钮只能复制一次,只能执行一次

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery高级事件---on、off、one和事件委托

on、off、onejQuery1.7 以后推出了.on()和.off()方法,替代之前的方法。on/off整合了bind、unbind、事件委托等方法 on替代bind方法on可以替代bind方法...
  • twilight_karl
  • twilight_karl
  • 2017年06月16日 16:48
  • 677

Jquery——Day3(高级事件)

1、模拟事件 在jquery中,可以使用trigger()方法完成模拟操作 (1)常用模拟 $('#btn').trigger("click"); 近似于$('#btn').click(); (2)触...
  • zxy9602
  • zxy9602
  • 2017年02月24日 17:49
  • 97

JQuery高级事件

源地址:http://www.cnblogs.com/ttcc/p/3801178.html 感谢作者 jQuery事件篇---高级事件 内容提纲: 1.模拟操作 2.命名空间 3...
  • lvjianyu2007
  • lvjianyu2007
  • 2014年06月22日 10:11
  • 407

JQuery实现高级检索功能

初学JQuery,写了一个高级检索的动态输入框,如图所示: 实现的功能:* 当选择属性下拉框中不同类型(字符串、数字、日期)的属性时,后面弹出不同数量的和不同格式的文本框(字符串弹出一个输入文本...
  • muziruoyi
  • muziruoyi
  • 2015年03月20日 16:59
  • 689

JQuery插件第十八个:高级搜索集成处理

(function($) { $.fn.AdvSearch = function(options) { var defaults = { searchb...
  • chinet_bridge
  • chinet_bridge
  • 2012年01月17日 20:29
  • 2886

Jquery高级编程(一)

1.创建一个嵌套的过滤器.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素2.重用你的元素查询var allItems = $("...
  • WuLex
  • WuLex
  • 2017年05月22日 22:35
  • 815

jQuery学习进阶篇

JQuery选择器 学习JQuery选择器是如何准确地选取你所希望应用效果的元素。JQuery元素选择器和属性选择器允许你通过标签名、属性名或内容对HTML元素进行选择。选择器允许你对HTML元素或...
  • chongshangyunxiao321
  • chongshangyunxiao321
  • 2016年04月14日 16:05
  • 1970

jQuery 多种高级页面属性和动画效果

完成目标:利用jQuery语法完成多种页面属性和动画效果 1.文字淡入淡出,显示及隐藏 代码: Title $(function () { ...
  • d18865556765
  • d18865556765
  • 2016年10月13日 20:29
  • 5004

jQuery事件大全(真的很全)

Dom: Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Ima...
  • tanga842428
  • tanga842428
  • 2016年09月21日 20:36
  • 1250

C# 高级知识 事件的标准用法

事件的标准用法1     class Program     {         static void Main(string[] args)         {             HasEv...
  • u013097169
  • u013097169
  • 2017年04月12日 23:28
  • 219
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery高级事件
举报原因:
原因补充:

(最多只允许输入30个字)