為jQuery添加自訂事件機制

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

關鍵字: jquery 外掛程式自訂事件機制

之前一直做flex，現在來做js，覺得js的事件機制不是很好用，參考flex的事件機製為jQuery開發一個外掛程式，即自訂事件。利用這個外掛程式，jQuery對象能夠派發自訂的事件，而父級的對象能夠對此事件進行監聽，對事件的處理依次分為捕獲，目標，冒泡三個階段。

捕獲：從根結點出發，到派發事件的目標對象，如果註冊了監聽，即會執行監聽函數。預設時，不開啟捕獲

目標：發出事件的目標對象，如果註冊了監聽，即會執行監聽函數

冒泡：捕獲的反過程，即從目標對象出發，依次調用父級對象的監聽函數。預設時，開啟冒泡

給個例子：

Html代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text jquery.jevent.js</title>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.jevent.js"></script>
<script type="text/javascript" >
var str1 = "Click1";
var str2 = "Click2";
$(document).ready(function(){
$("#div1"). addJEventListener(str1, function(data,str){alert("div1"+"@"+data.msg+"@"+str);},true);
$("#div11").addJEventListener(str1, function(data,str){alert("div11"+"@"+data.msg+"@"+str);},true);
$("#div2"). addJEventListener(str2, function(data,str){alert("div2"+"@"+data.msg+"@"+str);},true);
$("#div21").addJEventListener(str2, function(data,str){alert("div21"+"@"+data.msg+"@"+str);});
$("#button1").addJEventListener(str1, function(data,str){alert("button1"+"@"+data.msg+"@"+str);});
$("#button2").addJEventListener(str2, function(data,str){alert("button2"+"@"+data.msg+"@"+str);},true);
$("#button1").click(function(){
$(this).dispatchJEvent(str1,{msg:"msg from button1"});
});
$("#button2").click(function(){
$(this).dispatchJEvent(str2,{msg:"msg from button2"});
});
});
</script>
</head>
<body>
<div id="div1">
<div id="div11">
<img id="img1" src="pic3.jpg" width="140" height="140"/>
<input type="button" id="button1" value="click Me 1!"/>
</div>
</div>
<div id="div2">
<div id="div21">
<img id="img2" src="pic5.jpg" width="140" height="140"/>
<input type="button" id="button2" value="click Me 2!"/>
</div>
</div>
</body>
</html>

這個例子中，各級結點都通過addJEventListener()分別註冊了對"Click1"或"Click2"事件的監聽，而點擊button1時，會通過dispatchJEvent()派發事件，例子可以從附件中下載。如點擊button1時，依次alert的結果為：

div1@msg from button1@capture //div1在捕獲click1事件

div11@msg from button1@caputre //div11在捕獲click1事件

button1@msg from button1@target //目標對象button1執行監聽函數

div11@msg from button1@bubble //div11在冒泡過程中執行監聽函數

div1@msg from button1@bubble //div1的冒泡過程中執行監聽函數

可見先嚴格地執行了上面提到的處理事件的步驟。

細節部分：

1、當事件被派發時，只有目標對象的父級對象能夠得到處理事件的機會，如將上面的div2同樣也註冊對"Click1"的監聽，便不會被調用，因為div2並不是button1的父級對象。

2、對象在註冊對某一事件的監聽時，可以選擇是否找開捕獲或冒泡，如果開啟捕獲，則在事件處理的捕獲時即會執行監聽函數，預設時捕獲不開啟，冒泡開啟。

3、同一對象可以對某一事件多次註冊監聽，當然也可以刪除對事件的監聽

對外掛程式提拱的擴充介紹如下：

1、dispatchJEvent: function(name,data,capture,bubble)

jQuery對象通過此函數來派發事件，

name是事件的標識，為一個字串，

data為事件所攜帶的資訊，該資訊會做為參數傳遞給監聽函數，如上例中button1的data為{msg:"msg from button1"},

capture指示對該事件的處理是否開啟捕獲過程，預設為true，

bubble指示對該事件的處理是否開啟冒泡過程,預設為true.

2、addJEventListener:function(name,func,capture,bubble);

jQuery對象可以通過此函數來註冊對事件的監聽，

name仍是事件的標識，表示註冊的是對哪個事件的監聽，

capture表示該監聽是否參與事件處理的捕獲過程，預設為false

bubble表示是否參與事件處理的冒泡過程，預設為true，

func為所註冊的監聽函數，func定義的格式為 function(data,state) {},data即為事件派發時的參數,state代表此時處理過程位於哪個階段，是"capture","target"不是"bubble".

3、removeJEventListener:function(name,func);刪除對已經註冊的監聽

4、hasJEventListener:function(name);判斷是否已經註冊了對某一事件的監聽

有了這個外掛程式，應該可以提高jQuery的開發速度了。發上來與大家分享，期待大家的寶貴意見！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

為jQuery添加自訂事件機制

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support