triggerHandler()和trigger()區別

antzone發表於2017-04-18

關於這兩個方法的基本使用可以參閱以下兩篇文章:

（1）.triggerHandler方法參閱jQuery triggerHandler()一章節。

（2）.trigger方法參閱jQuery trigger()一章節。

下面就通過程式碼例項介紹一下這兩個方法的區別。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus");
  });
  $("#triggerHandler").click(function(){
    $("input").triggerHandler("focus");
  });
})
</script>
<body>
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
<input type="text" value="螞蟻部落">
</body>
</html>

trigger()和triggerHandler()都能夠觸發註冊在匹配元素上的事件；不過trigger()執行事件的預設動作，上面的程式碼中trigger()觸發事件就能夠使文字框獲取焦點，triggerHandler()觸發事件則不會執行事件的預設動作。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus");
  });
  $("#triggerHandler").click(function(){
    $("input").triggerHandler("focus");
  });
  $("input[type=text]").focus(function(){
    $("<span>www.softwhy.com</span>").appendTo("body").fadeOut(1000);
  });
})
</script>
<body>
<input type="text" value="螞蟻部落">
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
</body>
</html>

點選兩個按鈕都會執行註冊在文字框上的事件處理函式，並展示相應的效果。

特別注意的是，文字框並沒有獲取焦點 ，因為匹配的是input元素，而不僅僅是文字框，所以只有最後一個input元素獲得焦點。

再來看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus");
  });
  $("#triggerHandler").click(function(){
    $("input").triggerHandler("focus");
  });
  $("input[type=text]").focus(function(){
    $("<span>www.softwhy.com</span>").appendTo("body").fadeOut(1000);
  });
})
</script>
<body>
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
<input type="text" value="螞蟻部落">
</body>
</html>

點選第一個按鈕可以執行事件處理函式，而點選第二個按鈕則不能。

這是因為triggerHandler()只會觸發匹配元素集合中第一個元素的事件處理函式。

同時triggerHandler()觸發的事件不具有冒泡效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
  $("#trigger").click(function(){
    $("input").trigger("focus").val("螞蟻部落");
  });
  $("#triggerHandler").click(function(){
    var antzone=$("input").triggerHandler("focus");
    $("input").val(antzone);
  });
  $("input[type=text]").focus(function(){
    $("<span>www.softwhy.com</span>").appendTo("body").fadeOut(1000);
    return "antzone"
  });
})
</script>
<body>
<input type="text" value="螞蟻部落">
<input type="button" value="trigger" id="trigger"/>
<input type="button" value="triggerHandler" id="triggerHandler"/>
</body>
</html>

trigger()返回具有鏈式呼叫效果，也就是返回值是匹配元素集合物件；triggerHandler()返回值是事件處理函式的返回值。

相關文章