dojo/on
簡介
dojo/on 是 dojo 中用來連接事件 (event) 和事件監聽器 (event listener) 的模組。用法並不難，其中有幾個常用的函式，列示語法如下：
- on(target, type, listener)
- 當 target 觸發 type 事件時，執行 listener 監聽函式。傳回一個 handler 物件。
- on.once(target, type, listener)
- 當 target 觸發 type 事件時，執行 listener 監聽函式。但只有第一次觸發時，會執行監聽函式，隨後觸發的事件都即不再執行監聽函式。傳回一個 handler 物件。
- on(target, type, listener)
- 在 target 元件觸發 type 事件時，執行 listener 函式，傳回值為事件的 handler。
- on.emit(target, type, eventParam)
- 促使 target 觸發一個 type 型態的事件。eventParam 是一個 Javascript 的物件，內中包含所要傳給監聽函式的參數。傳回一個 handler 物件。
- handler.remove()
- 移除監聽器。handler 為上面各函式所傳回的物件。
on.once() 和 on() 的用法完全一樣，唯一不同的地方是 on.once() 只會觸發一次事件，之後會自動移除事件的 handler，之後就不會再觸發相同型態的事件了。
on.emit() 函式執行時會引起 target 觸發 type 的事件，第三個參數 eventParam 是一個物件，物件中可以定義事件的屬性，這些屬性會被融入 (mixin) 觸發的事件物件中，可以藉此傳遞參數給事件監聽器。由 on.emit() 所觸發的事件物件是 Event，和由圖形介面元件所觸發的 MouseEvent 不太一樣，最大的差異在兩者具備屬性的個數。
範例
在範例中建立了兩個方塊圖形元件，點按左邊的淡紫色方塊會在主控台中，將事件物件印出來，按幾次印幾個。只要一按右邊的淡綠色方塊，就會讓淡紫色的方塊再觸發一次事件，隨後移除事件的 handler，之後再按淡紫色的方塊，就再也不會觸發任何事件了。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:100%;
padding-top:20px;
}
.box {
box-sizing:border-sizing;
margin:10px;
width:200px;
height:200px;
border:3px solid gray;
background-color: #EEEEEE;
}
.box:hover {
cursor:pointer;
}
.violet {
background-color:#EE82EE;
float: left;
}
.lightGreen{
background-color:#98FB98;
float:left;
}
</style>
CSS 中，.box 定義了兩個方塊元件的共通樣式，.box:hover 定義了游標在移動到方塊上方時，改變游標的樣式。.violet 及 .lightGreen 則定義各自的背景顏色及位置。
HTML
<body class="claro"<
</body>
HTML 中就定義兩個 <div< 用來顯示兩個方塊。
Script
第 21~23 行把由淡紫色方塊觸發的事件和處理函式串起來。
第 25~27 行是事件處理函式，單純只是把事件物件在主控台印出來。
第 30~33 行把由淡綠色方塊觸發的事件和處理函式串起來。在處理函式中，再讓淡紫色方塊觸發一次 click 事件。這事件只會觸發一次。
第 35 行把淡紫色方塊的事件處理器移除。
沒有留言:
張貼留言