内容提纲:

1.模拟操作

2.命名空间

3.事件委托

4.on、off 和 one

发文不易,转载请注明出处!

一.模拟操作

在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击。

//点击按钮事件

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

  alert('我的第一次点击来自模拟!');

});

//模拟用户点击行为

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

//可以合并两个方法

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

  alert('我的第一次点击来自模拟!');

}).trigger('click');

有时在模拟用户行为的时候, 我们需要给事件执行传递参数, 这个参数类似与 event.data的额外数据(但是注意区别,见基础事件篇),可以是数字、字符串、数组、对象。

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

  alert(data1 + ',' + data2);

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

PS:当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含起来。但不能认为是数组形式,下面给出一个复杂的说明:

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

  alert(data1.a + ',' + data2[1]);

}).trigger('click', [{'a' : '1', 'b' : '2'}, ['123','456']]);

除了通过 JavaScript 事件名触发,也可以用于自定义的事件触发,所谓自定义事件其实就是一个被.bind()绑定的任意函数。自定义事件无法单独执行,但是可以通过trigger模拟执行。示例如下:

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

alert('自定义事件!');

}).trigger('myEvent');

.trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个空的同名事件即可。

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

  alert('我的第一次点击来自模拟!');

}).click();                    //执行空的click()模拟用户行为

这种便捷的方法,jQuery 几乎个所有常用的事件都提供了。

jQuery 还提供了另外一个模拟用户行为的方法:.triggerHandler();这个方法的使用和.trigger()方法一样。

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

  alert('我的第一次点击来自模拟!');

}).triggerHandler('click');

在常规的使用情况下,与trigger()几乎没有区别,都是模拟用户行为,也可以传递额外参数。但在某些特殊情况下仍有差异,主要有以下四点:

1. .triggerHandler()方法并不会触发事件的默认行为,而.trigger()会。

$('form').trigger('submit');                         //模拟用户执行提交,并跳转到执行页面

$('form').triggerHandler('submit');           //模拟用户执行提交,并阻止的默认行为

如果我们希望使用.trigger()来模拟用户提交, 并且阻止事件的默认行为, 则需要这么写:

$('form').submit(function (e) {

  e.preventDefault(); //阻止默认行为

}).trigger('submit');

2. .triggerHandler()方法只会影响第一个匹配到的元素,而.trigger()会影响所有。

3.   .triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回undefined;而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便连缀调用)。

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

  return 123;

}).triggerHandler('click'));                 //返回 123,没有 return 返回undefined

4.    .trigger()在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是jQuery 扩展于 DOM 的机制,并非 DOM 特性。而.triggerHandler()不会冒泡。

示例:

html部分代码:

 <div class="d1">

          <div class="d2">

                    <div class="d3">

                             div

                    </div>

          </div>

 </div>

JS代码部分:

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

          alert('自定义事件!');

 })

 $('.d3').trigger('myEvent');                       //会冒泡,有3个输出

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

          alert('自定义事件!');

 })

 $('.d3').triggerHandler('myEvent');               //不会冒泡,只有1个输出

二.命名空间

有时,我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦,这个时候,可以使用事件的命名空间解决。

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

  alert('abc');

});

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

  alert('xyz');

});

$('input').unbind('click.abc');             //移除 命名为abc的click 事件

PS:也可以直接使用('.abc'),这样的话,可以移除相同命名空间的不同事件。对于模拟操作.trigger()和.triggerHandler(),用法也是一样的。

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

三.事件委托

//HTML 代码部分

 <div style="background:red;width:200px;height:200px;" id="box">
  <input type="button" value="按钮" class="button" />
</div>

//使用.bind()不具备动态绑定功能,只有点击原始按钮才能生成

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

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

});

//使用.live()具备动态绑定功能,jQuery1.3 使用,jQuery1.7 之后废弃,jQuery1.9 删除。

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

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

});

PS:.live()原理就是把 click 事件绑定到祖先元素$(document)上,而只需要给$(document)绑定一次即可,而非多次。然后就可以处理后续动态加载的按钮的单击事件。在接受任何事件时,$(document)对象都会检查事件类型(event.type)和事件目标(event.target),如果 click事件是.button,那么就执行委托给它的处理程序。1.9版本之后.live()方法已经被删除,无法使用了。需要测试使用的话,需要引入向下兼容插件。

//.live()无法使用链接连缀调用,因为参数的特性导致

$('#box').children(0).live('click', function () {

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

});

在上面的例子中,我们使用了.clone()克隆。其实如果想把事件行为复制过来,我们只需要传递 true 即可:.clone(true)。这样也能实现类似事件委托的功能,但原理却截然不同。一个是复制事件行为,一个是事件委托。而在非克隆操作下,此类功能只能使用事件委托。如下:

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

  $('<input type="button" value="复制的" class="button" />').appendTo('#box');

});

当我们需要停止事件委托的时候,可以使用.die()来取消掉。

$('.button').die('click');

由于.live()和.die()在 jQuery1.4.3 版本中废弃了, 之后推出语义清晰、 减少冒泡传播层次、又支持连缀调用方式的方法: .delegate()和.undelegate()。 但这个方法在 jQuery1.7 版本中被.on()方法整合替代了。

$('#box').delegate('.button', 'click', function () {  //注意绑定的元素和参数的顺序

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

});

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

//支持连缀调用方式

$('div').first().delegate('.button', 'click', function () {

  $(this).clone().appendTo('div:first');

});

PS:.delegate()需要指定父元素,然后第一个参数是当前元素,第二个参数是事件方式, 第三个参数是执行函数。 和.bind()方法一样, 可以传递额外参数。 .undelegate()和.unbind()方法一样可以直接删除所有事件,比如:.undelegate('click')。也可以删除命名空间的事件,比如:.undelegate('click.abc')。

PS:.live()和.delegate()和.bind()方法一样都是事件绑定,那么区别也很明显,用途上遵循两个规则:1.在 DOM 中很多元素绑定相同事件时;2.在 DOM 中尚不存在即将生成的元素绑定事件时;我们推荐使用事件委托的绑定方式,否则推荐使用.bind()的普通绑定。

四.on、off 和 one

目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱,为此 jQuery1.7版本以后推出了.on()和.off()方法彻底摒弃前面三组。

//替代.bind()方式

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

alert('替代.bind()');

});

//替代.bind()方式,并使用额外数据和事件对象

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

  alert('替代.bind()' + e.data.user);

});

//替代.bind()方式,并绑定多个事件

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

  alert('替代.bind()移入移出!');

});

//替代.bind()方式,以对象模式绑定多个事件

$('.button').on({

mouseover : function () {

  alert('替代.bind()移入!');

},

mouseout : function () {

  alert('替代.bind()移出!');

}

});

//替代.bind()方式,阻止默认行为并取消冒泡

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

  return false;

});

$('form').on('submit', false);   //直接传递false参数

//替代.bind()方式,阻止默认行为

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

e.preventDefault();

});

//替代.bind()方式,取消冒泡

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

e.stopPropagation();

});

//替代.unbind()方式,移除事件

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

$('.button').off('click', fn);

$('.button').off('click.abc');

//替代.live()和.delegate(),事件委托

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

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

});

//替代.die()和.undelegate(),取消事件委托

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

注意:和之前方式一样,事件委托和取消事件委托也有各种搭配方式,比如额外数据、命名空间等等,这里不在赘述。

不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off()来手工移除。jQuery 提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触发一次的事件。

//类似于.bind()只触发一次

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

alert('one 仅触发一次!');

});

//类似于.delegate()只触发一次

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

alert('one 仅触发一次!');

});

For my lover,

and thank you Mr.Lee!

jQuery事件篇---高级事件的更多相关文章

  1. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

  2. jQuery-3.事件篇---自定义事件

    jQuery自定义事件之trigger事件 众所周知类似于mousedown.click.keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发. 在j ...

  3. jQuery-3.事件篇---键盘事件

    jQuery键盘事件之keydown()与keyup()事件 鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为.相对应的键盘也有这类事件,将用户行为分解成2个 ...

  4. jQuery-3.事件篇---鼠标事件

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  5. [置顶] 一步一步学android之事件篇——下拉列表事件

    上一篇RadioGroup比较简单,所以再学习个spinner的OnItemSelectedListener事件,前面说过spinner的主要功能就是提供列表显示的选择,比如我们在选择城市的时候就会用 ...

  6. 一步一步学android之事件篇——单击事件

    在使用软件的时候单击事件必不可少,比如我想确定.取消等都需要用户的单击,所有的单击事件都是由View.OnClickListener接口来进行处理的,接口定义如下: public static int ...

  7. 一步一步学android之事件篇——触摸事件

    触摸事件顾名思义就是触摸手机屏幕触发的事件,当用户触摸添加了触摸事件的View时,就是执行OnTouch()方法进行处理,下面通过一个动态获取坐标的例子来学习OnTouchListener事件,效果如 ...

  8. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  9. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

随机推荐

  1. C#写入文件

    using (System.IO.StreamWriter file = new System.IO.StreamWriter(@"C:\testDir\test2.txt", t ...

  2. “全栈2019”Java第一百零七章:匿名内部类与构造方法注意事项

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. Kali Linux来袭~老司机带你进击

    Kali是BackTrackLinux完全遵循Debian开发标准彻底的完全重建.全新的目录框架,复查并打包所有工具,我们还为VCS建立了Git树. 本次推荐内容主要介绍Kali-Linux的安装,包 ...

  4. Linux下的压缩及归档

    Linux下常用的压缩格式有: gz,bz2,xz,zip,Z //只能压缩文件不能压缩目录,如果传递一个目录,他会把目录中的文件逐个压缩 ..压缩算法:算法不同,压缩比也不同 gz:gzip,压缩后 ...

  5. C++与C的区别二

    1. new,delete的局部重载: #include <iostream> using namespace std; ; class myclass { public: myclass ...

  6. forward与redirect

    前者仅是容器中控制权的转向,在客户端浏览器地址栏中不会显示出转向后的地址:后者则是完全的跳转,浏览器将会得到跳转的地址,并重新发送请求链接.这样,从浏览器的地址栏中可以看到跳转后的链接地址.所以,前者 ...

  7. HDU – 1050 Moving Tables

    http://acm.hdu.edu.cn/showproblem.php?pid=1050 当时这道题被放在了贪心专题,我又刚刚做了今年暑假不AC所以一开始就在想这肯定是个变过型的复杂贪心,但是后来 ...

  8. Handover

    In brief, eNodeB select one MME based on IE: Relative MME Capacity in S1 Setup Response, S-GW and P- ...

  9. List的定制排序 包括使用lambda表达式来实现的方法

    1.先实现Comparator的接口 重写compare方法 根据比较大小来返回数值: 比如:(Integer o1  -   Integer o2); return 1 表示o1>o2; re ...

  10. linux下的grep命令

    grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它能使用正 ...