Mootools Event 事件函數

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

原始碼

1. //設定 id="button" 元素的 click 事件 
2. $('button').addEvent('click',function(){ 
3.   alert(this.getHTML()); 
4. }); 
5.  
6. //設定 id="button" 下所有 <a> 元素群的 click 事件 
7. $$('#button a').addEvent('click',function(e){ 
8.   alert(this.getHTML()); 
9. }); 
10.  
11. //設定 id="button" 元素的 click 與 mouseover 事件 
12. $('button').addEvents({ 
13.   'click': function(e){ 
14.       alert('click'); 
15.   }, 
16.   'mouseover': function(e){ 
17.       alert('mouseover'); 
18.   } 
19. }); 
20.  
21. //移除 id="button" 元素上的 click 事件 
22. $('button').removeEvents('click'); 
23. //執行 id="button" 元素上的 click 事件 
24. $('button').fireEvent('click'); 

//設定 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

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