前言
許多時候我們需要自己定義事件並監聽它，本篇將以jQuery提供的方法實作客製化(customize)的事件(event)，學會自己建立事件，是建立一個大型應用的基礎。
Event Bubbling
如果你對event bubble還不了解，那你可以先找些文章了解，這裡不在詳述。
推薦 : JavaScript 天書 -- 什麼是event bubbling
推薦 : JavaScript 天書 -- 什麼是event bubbling
動手吧!
我們將建立一個自定義事件my-event，然後我們有一個三層div的結構，觸發並使用trigger在不同層觸發my-event事件，說到這裡可能有點難離解，看看程式碼比較容易瞭解
<html>
<head>
<script>
$(document).ready(function(){
$("#level1").on("my-event", function(){
$("#level1-text").text("receive");
});
$("#level2").on("my-event", function(){
$("#level2-text").text("receive");
});
$("#level3").on("my-event", function(){
$("#level3-text").text("receive");
});
$("#trigger1").click(function(){
$("#level1").trigger("my-event");
});
$("#trigger2").click(function(){
$("#level2").trigger("my-event");
});
$("#trigger3").click(function(){
$("#level3").trigger("my-event");
});
});
</script>
<style>
#level1 {
background-color : lightBlue;
padding : 30px;
border : 3px solid black;
}
#level2 {
background-color : lightgreen;
padding : 30px;
border : 3px solid black;
}
#level3 {
background-color : lightpink;
padding : 30px;
border : 3px solid black;
}
</style>
</head>
<body>
<h1>Event listening</h1>
<h4 style="text-align : right">By Augus</h4>
<div id="level1">
<p id="level1-text">Level1</p>
<div id="level2">
<p id="level2-text">Level2</p>
<div id="level3">
<p id="level3-text">Level3</p>
</div>
</div>
</div>
<button id="trigger1">Trigger level1</button>
<button id="trigger2">Trigger level2</button>
<button id="trigger3">Trigger level3</button>
<h2>Code</h2>
<code class="prettyprint">
</code>
</body>
</html>
可以看到，我們有三個按鈕分別會觸發(trigger)my-event，my-event會外最外層傳入，一層一層的進入div內，每個div都會去監聽event事件，當街收到my-event時，就會顯示recevie。
沒有留言:
張貼留言