2008-02-12

Mootools Event 事件函數

Mootools 的事件設定可以支援群組元素


//設定 id="button" 元素的 click 事件
$('button').addEvent('click',function(){
alert(this.getHTML());
});

//設定 id="button" 下所有 <a> 元素群的 click 事件
$$('#button a').addEvent('click',function(e){
alert(this.getHTML());
});

//設定 id="button" 元素的 click 與 mouseover 事件
$('button').addEvents({
'click': function(e){
alert('click');
},
'mouseover': function(e){
alert('mouseover');
}
});

//移除 id="button" 元素上的 click 事件
$('button').removeEvents('click');
//執行 id="button" 元素上的 click 事件
$('button').fireEvent('click');



其他事件名稱:
圖片事件abort讀取中斷
error讀取錯誤
焦點事件blur離開焦點
focus取得焦點
選單事件change選單狀態改變
滑鼠按鍵事件click點擊點選鍵
dblclick點擊二次點選鍵
mousedown按下點選鍵時
mouseup放開點選鍵時
鍵盤事件keydown鍵盤按下時
keyup鍵盤放開時
頁面讀取load讀取結束時
unload切換頁面時
滑鼠事件mouseover游標重疊時
mouseout游標離開時
mousemove游標移動時
mouseenter游標進入時, 經過子元素時不觸發
mouseleave游標離開時, 經過子元素時不觸發
表單事件submit表單送出時
reset表單重置時
捲軸事件scroll捲動時
文字選取事件select選取文字時


類別庫:
Element.Event.js
Element-Event.js
2008-02-11

Mootools Element 選擇函數

$('button')
這個用法在很多 framework 上都一樣,只是簡化了
document.getElementById('button') 這個函數


$$('#button')
這個選擇函數跟 CSS 的選擇方式是一樣的,可以選出一個元素群

$$('#button a')
取得 id="button" 下所有 <a> 的元素

$$('#button a','#button b')
取得 id="button" 下所有 <a> 及 <b> 的元素

$$('#button a.link')
取得 id="button" 下所有 <a class="link"> 的元素


$('button').getElements('a[title=link]')
取得 id="button" 下所有 <a title="link"> 的元素

$('button').getElements('a[title$=ink]')
取得 id="button" 下所有 <a> 屬性 title 以 ink 結尾的元素

其他選擇方式:
= :等於
^=:開始等於
$=:結尾等於
!=:不等於


$('button').getElement('a[name=link]')
與 getElements() 相同:
但只會取得 id="button" 下第一個 <a name="link"> 的元素

$('button').getElementsBySelector('a','b')
與 getElements() 相同:
可以取得 id="button" 下所有 <a> 及 <b> 的元素


類別庫:
Element.js
Element.Selectors.js
Element-Selectors.js