jQuery自定義事件簡單介紹

antzone發表於2017-04-05
jQuery事件

本章節通過簡單的程式碼例項介紹一下jQuery中的自定義事件。

很多朋友可能接觸過自定義事件這個概念，但是並不知道它存在的意義何在，下面也會做一下簡單介紹。

現在這裡我們有一個核取方塊，下面為其註冊一個click事件處理函式。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var count=1;
  $("#ck").click(function(){
    count=count+1;
    $("#show").text(count);
  })
});
</script>
</head>
<body>
<input type="checkbox" id="ck"/>
<div id="show"></div>
</body>
</html>

上面的程式碼為核取方塊註冊了click事件處理函式，不過這個時候每觸發一次事件就會改變核取方塊的選中狀態。

那麼如何在不改變核取方塊選中狀態的情況下，執行事件處理函式的邏輯處理呢，其實很簡單，那就是直接建立一個函式，此函式來完成邏輯處理即可，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var onClick=function(dom){
  count=count+1;
  $("#show").text(count);
};

呼叫上面的函式就可以執行一次事件處理函式的邏輯處理，但是不改變核取方塊的選中狀態。

但是利用自定義事件來解決此問題是更為優秀的選擇:

（1）.核取方塊的邏輯處理應該屬於核取方塊，沒有必要使用一個全域性函式來進行處理。並且從面相物件的角度來看，物件是是由屬性和動作（方法）構成的，所以核取方塊的邏輯處理最好是要屬於核取方塊這個物件。

（2）.充分利用匿名函式，減少全域性變數或者函式的數量，有利於提高指令碼的執行效率。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var count=1;
  $("#ck").bind("evtClick",function(evt){
    count=count+1;
    $("#show").text(count);
  }); 
  $("#bt").click(function(){
    $("#ck").trigger("evtClick");
  })
});
</script>
</head>
<body>
<input type="checkbox" id="ck"/>
<input type="button" id="bt" value="檢視效果"/>
<div id="show"></div>
</body>
</html>

上面的程式碼會更科學一點，程式碼非常的簡單不多介紹了。

trigger()方法可以參閱jQuery trigger()一章節。

相關文章