jQuery事件模型之默認行爲執行順序，以及trigger()與 triggerHandler()比較

時間 2019-12-07

標籤 jquery 事件模型默認行爲執行順序以及 trigger triggerhandler 比較欄目 JQuery 简体版

原文原文鏈接

前言：
最近在工做中作需求時發現了一個詭異的事情，在使用jQuery觸發事件時，並不老是先執行默認行爲，再執行綁定的事件行爲，有時候多是相反的順序。因而上網查找了下資料，還真有個外國哥們和我遇到同一個問題！整理下筆記先~ ~javascript

默認行爲執行順序

通常來講，瀏覽器執行事件的順序是：先執行默認行爲再執行綁定的行爲。
但是在 jquery 中有些時候會出現相反的順序，先執行綁定的行爲，再執行默認行爲。
那這裏說的「有些時候」究竟是何時呢？html

看下面的代碼示例：java

<!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結果爲 true，input 的默認行爲是在綁定的 click 事件以前發生的；當點擊 button 元素時，alert結果卻變成了 false，input 的默認行爲是在綁定的 click 事件以後發生的；jquery

細細體會其中的差異，發現當調用JQuery 的 $(selector) .click( )或者$(selector).trigger('click') 來觸發 selector 元素的click事件時，默認行爲會在綁定的 click 事件以後發生。瀏覽器

那麼若是咱們但願，任何狀況下默認行爲都在綁定的 click 事件以前發生怎麼作呢？函數

最簡單的方法就是在觸發 input 元素的 click 事件以前，手動設置 checkbox 的 checked 屬性，而後經過 triggerHandler()來觸發 click 事件（不觸發瀏覽器的默認行爲）。代碼以下所示：測試

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

共同點：

都能觸發經過 jquery 綁定的事件處理函數，如 .on()/.bind()/.click(function(){ })這些方式；this
都能觸發原生元素對象上的on{eventType}綁定的事件處理函數；code

不一樣點：

triggerHandler(‘event') 不會觸發原生元素對象上的.event()方法（這種事件叫native event），而 trigger(‘event’)則會；
瀏覽器的默認行爲實際上是執行了原生元素對象上的.event()方法！！！orm
.triggerHandler()只會觸發第一個匹配的元素上的事件，而 trigger()會觸發全部匹配元素的事件；
.triggerHandler()觸發的事件不會冒泡，而 trigger()會冒泡；
.triggerHandler()返回值能夠是任意值，若是沒有明確 return 值，則爲 undefined，而.trigger()永遠返回 jQuery object。因此使用.triggerHandler()時鏈式調用得本身實現。

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

有一次我用 trigger('click')來觸發點擊事件時，鼠標並無改變位置，也就是說鼠標焦點沒有改變。測試了下發現，trigger( )與triggerHandler( )觸發事件時並不會改變鼠標焦點，因此trigger('click')方式觸發點擊事件這種方式，仍是和用戶真正執行點擊動做是不一樣的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。