jQuery學習筆記9：進階事件

1    模拟操作

1.1    .trigger()方法

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

       alert('我将要使用模拟使用者操作來觸發！');

   });        

   //模拟使用者點選操作

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

等效于    

   }).trigger('click');

    //trigger額外資料，隻有一條的時候，可以省略中括号，多條不能省略，否則第二條之後就無法識别了。    

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

       alert(data1 + '|' + data2 + '|' + data3[1] + '|' + data4.user);

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

   $('input').bind('click', {user : 'Lee'} ,function (e, data1, data2, data3, data4) {

       alert(data1 + '|' + data2 + '|' + data3[1] + '|' + data4.user + '|' + e.data.user);

   //click,mouseover這些是系統事件，自定義事件就是自己起名字的事件

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

       alert('自定義事件！');

   }).trigger('myEvent');

   .trigger()方法提供了簡寫方案，隻要想讓某個事件執行模拟使用者行為，直接再調用一個空的同名事件即可。

<a href="http://s3.51cto.com/wyfs02/M01/12/64/wKioL1MFlOLRPtfbAAErz0Mvbqg253.jpg" target="_blank"></a>

   }).click();

1.2    .triggerHandler()方法

（1） .triggerHandler()方法并不會觸發事件的預設行為，而.trigger()會。

   //trigger送出後跳轉，沒有阻止預設行為

   $('form').trigger('submit');

   //trigger送出後沒有跳轉，預設行為被阻止了

   $('form').triggerHandler('submit');

   //如果我們希望使用.trigger()來模拟使用者送出，并且阻止事件的預設行為，則需要這麼寫

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

   e.preventDefault(); //阻止預設行為

   }).trigger('submit');

（2） .triggerHandler()方法隻會影響第一個比對到的元素，而.trigger()會影響所有。

（3）.triggerHandler()方法會傳回目前事件執行的傳回值，如果沒有傳回值，則傳回undefined；而.trigger()則傳回目前包含事件觸發元素的jQuery 對象(友善鍊式連綴調用)。

   }).trigger('click').css('color', 'red');                    //傳回jQuery對象，可以連綴

       return 123;

   }).triggerHandler('click');        //傳回123

（4）.trigger()在建立事件的時候，會冒泡。但這種冒泡是自定義事件才能展現出來，是jQuery 擴充于DOM 的機制，并非DOM 特性。而.triggerHandler()不會冒泡。

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

   })    

   $('.d3').trigger('myEvent');                        //會冒泡    

   $('.d3').triggerHandler('myEvent');           //不會冒泡

2    命名空間

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

       alert('abc');

   });

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

       alert('xyz');

   });    

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

   $('input').unbind('click.abc');  //移除click 事件中命名空間為abc的

   $('input').unbind('.abc');       //移除命名空間為abc的所有事件

   //對于模拟操作.trigger()和.triggerHandler()，用法也是一樣的。

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

3    事件委托與事件綁定

   在jQuery 中，我們通過事件冒泡的特性，讓子元素綁定的事件冒泡到父元素(或祖先元素)上，然後再進行相關處理即可。

   使用.live()具備動态綁定功能，jQuery1.3 使用，jQuery1.7 之後廢棄，jQuery1.9 删除。由于.live()和.die()在jQuery1.4.3版本中廢棄了，之後推出語義清晰、減少冒泡傳播層次、又支援連結連綴調用方式的方法：.delegate()和.undelegate()。但這個方法在jQuery1.7 版本中被.on()方法整合替代了。

     普通綁定.bind，普通解綁.unbind；事件委托.live .delegate，解除委托.die .undelegate。新方法綁定.on，新方法解綁.off。從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 (e) {

       alert('移入移出');

   //替代.bind()方式，以對象模式綁定多個事件

   $('.button').on({

       mouseover : function () {

           alert('移入');

       },

       mouseout : function () {

           alert('移出');

       }

   //替代.bind()方式，阻止預設行為并取消冒泡

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

       return false;

或

   $('form').on('submit', false);

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

   //替代.bind()方式，阻止預設行為

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

       e.preventDefault();

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

       e.stopPropagation();

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

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

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

   //替代.live .delegate

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

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

   //移出事件委托

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

   jQuery 提供了.one()方法，綁定元素執行完畢後自動移除事件，可以方法僅觸發一次的事件。

   //類似于.bind()隻觸發一次

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

       alert('one 僅觸發一次！');

   //類似于.delegate()隻觸發一次

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

     本文轉自stock0991 51CTO部落格，原文連結：http://blog.51cto.com/qing0991/1361123，如需轉載請自行聯系原作者