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

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

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

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

前言：

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

默認(rèn)行為執(zhí)行順序

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

看下面的代碼示例：

<!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個(gè)元素，一個(gè)是 input 元素，一個(gè)是button 元素，并分別綁定了click 事件。當(dāng)直接點(diǎn)擊 input 元素時(shí)，alert結(jié)果為 true，input 的默認(rèn)行為是在綁定的 click 事件之前發(fā)生的；當(dāng)點(diǎn)擊 button 元素時(shí)，alert結(jié)果卻變成了 false，input 的默認(rèn)行為是在綁定的 click 事件之后發(fā)生的；

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

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

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

$( "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ū)別

共同點(diǎn)：

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

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

不同點(diǎn)：

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

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

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

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

使用 trigger( )與triggerHandler( )注意事項(xiàng)

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

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

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

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論