欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較實例分析

 更新時間：2020年04月30日 11:17:40   作者：ruoyiqing  
這篇文章主要介紹了jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較,結(jié)合實例形式分析了jQuery事件模型默認行為執(zhí)行順序相關(guān)原理,以及trigger()與 triggerHandler()的異同點比較,需要的朋友可以參考下

本文實例講述了jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較。分享給大家供大家參考，具體如下：

前言：

最近在工作中做需求時發(fā)現(xiàn)了一個詭異的事情，在使用jQuery觸發(fā)事件時，并不總是先執(zhí)行默認行為，再執(zhí)行綁定的事件行為，有時候可能是相反的順序。于是上網(wǎng)查找了下資料，還真有個外國哥們和我遇到同一個問題！整理下筆記先~ ~

默認行為執(zhí)行順序

一般來說，瀏覽器執(zhí)行事件的順序是：先執(zhí)行默認行為再執(zhí)行綁定的行為。
可是在 jquery 中有些時候會出現(xiàn)相反的順序，先執(zhí)行綁定的行為，再執(zhí)行默認行為。
那這里說的“有些時候”到底是什么時候呢？

看下面的代碼示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Trigger and Default Behavior Demo</title>
 
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
 
// When the DOM is ready, initialize.
$(function(){
  $( "input" ).click(
    function( objEvent ){
      // Alert the checkboxed status.
      alert( this.checked );
    }
  );
   
  $( "button" ).click(
    function( objEvent ){
      // Trigger click on the checkbox.
      $( "input" ).click();
    }
  );
});
</script>
</head>
<body>
 
<h1>
jQuery Trigger and Default Behavior Demo
</h1>
 
<form>
<input type="checkbox" />
<button>click checkbox</button>
</form>
 
</body>
</html>

說明：頁面中有2個元素，一個是 input 元素，一個是button 元素，并分別綁定了click 事件。當直接點擊 input 元素時，alert結(jié)果為 true，input 的默認行為是在綁定的 click 事件之前發(fā)生的；當點擊 button 元素時，alert結(jié)果卻變成了 false，input 的默認行為是在綁定的 click 事件之后發(fā)生的；

細細體會其中的差別，發(fā)現(xiàn)當調(diào)用JQuery 的 $(selector) .click( )或者$(selector).trigger('click') 來觸發(fā) selector 元素的click事件時， 默認行為會在綁定的 click 事件之后發(fā)生。

那么如果我們希望，任何情況下默認行為都在綁定的 click 事件之前發(fā)生怎么做呢？

最簡單的方法就是在觸發(fā) input 元素的 click 事件之前，手動設置 checkbox 的 checked 屬性，然后通過 triggerHandler()來觸發(fā) click 事件（不觸發(fā)瀏覽器的默認行為）。代碼如下所示：

$( "input" ).click(
  function( objEvent ){
  // Alert the checkboxed status.
  alert( this.checked );
  }
);
$( "button" ).click(
  function( objEvent ){
  // Toggle checkbox checked status.
  $( "input" )[ 0 ].checked = !$( "input" )[ 0 ].checked;
  // Trigger ONLY click event hanlders on the checkbox.
  $( "input" ).triggerHandler( "click" );
  }
);

jQuery中 trigger( ) 與 triggerHandler( ) 區(qū)別

共同點：

  1. 都能觸發(fā)通過 jquery 綁定的事件處理函數(shù)，如 .on()/.bind()/.click(function(){ })這些方式；

  2. 都能觸發(fā)原生元素對象上的on{eventType}綁定的事件處理函數(shù)；

不同點：

  1. triggerHandler(‘event') 不會觸發(fā)原生元素對象上的.event()方法（這種事件叫native event），而 trigger(‘event')則會；
    瀏覽器的默認行為其實是執(zhí)行了原生元素對象上的.event()方法?。。?/p>

  2. .triggerHandler()只會觸發(fā)第一個匹配的元素上的事件，而 trigger()會觸發(fā)所有匹配元素的事件；

  3. .triggerHandler()觸發(fā)的事件不會冒泡，而 trigger()會冒泡；

  4. .triggerHandler()返回值可以是任意值，如果沒有明確 return 值，則為 undefined，而.trigger()永遠返回 jQuery object。所以使用.triggerHandler()時鏈式調(diào)用得自己實現(xiàn)。

使用 trigger( )與triggerHandler( )注意事項

有一次我用 trigger('click')來觸發(fā)點擊事件時，鼠標并沒有改變位置，也就是說鼠標焦點沒有改變。測試了下發(fā)現(xiàn)，trigger( )與triggerHandler( )觸發(fā)事件時并不會改變鼠標焦點，所以trigger('click')方式觸發(fā)點擊事件這種方式，還是和用戶真正執(zhí)行點擊動作是不同的。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。

相關(guān)文章

最新評論