今天我們開始第五講，在上一講（《Mootools 1.2教程(4)——函數》）中，我們學習了在MooTools 1.2中建立和使用函數的幾種不同方式。下一步就是理解事件了。和選擇器類似，事件也是建立互動界面的一個重要部分。一旦你掌握了一個元素，你需要去決定什麼行為來觸發什麼效果。先把效果留著以後在講，我們首先看一看中間步驟和一些常見的事件。
左鍵單擊事件
左鍵單擊事件是web開發中最常見的事件。超鏈接識別點擊事件，然後把你帶到另外一個URL地址。MooTools能夠識別其他DOM元素上的點擊事件，在設計和功能上給了你極大的靈活性。給一個元素添加一個點擊事件的第一步：
參考代碼：
- // 通過$('id_name') 取得一個元素
- // 用.addEvent添加事件
- // ('click')定義了事件的類型
- $('id_name').addEvent('click', function(){
- // 在這裡添加點擊事件發生時你要執行的任何代碼
- alert('this element now recognizes the click event');
- });
你也可以把這個函數從.addEvent();獨立出來來完成相同的事情：
參考代碼： [復制代碼] [保存代碼]
- var clickFunction = function(){
- // 在這裡添加事件發生時你要執行的任何代碼
- alert('this element now recognizes the click event');
- }
-
- window.addEvent('domready', function() {
- $('id_name').addEvent('click', clickFunction);
- });
參考代碼： [復制代碼] [保存代碼]
- <body>
- <div id="id_name"> <! -- this element now recognizes the click event -->
- </div>
- </body>
注意：和超鏈接識別點擊事件一樣，MooTools的點擊事件實際上也是識別“mouse up”，意味著當你鼠標松開是發生，而不是鼠標按下去的時候發生。這就給了用戶一個機會去改變他們的主意——只要在松開之前把鼠標的指針從點擊的元素上移開就可以了。
鼠標進入和離開事件
當鼠標停留在一個鏈接元素上時，超級鏈接還識別“hover”事件。通過MooTools，你可以給其他的DOM元素也添加一個懸停事件。通過把這個事件分為鼠標進入和鼠標離開事件，你可以更加靈活地根據用戶的行為來操控DOM。
和以前一樣，我們要做的第一件事就是把一個事件附加到一個元素：
參考代碼： [復制代碼] [保存代碼]
- var mouseEnterFunction = function(){
- // 在這裡添加事件發生時你要執行的任何代碼
- alert('this element now recognizes the mouse enter event');
- }
-
- window.addEvent('domready', function() {
- $('id_name').addEvent('mouseenter', mouseEnterFunction);
- });
鼠標離開事件也是同樣的，這個事件在鼠標指針離開一個元素時發生。
參考代碼： [復制代碼] [保存代碼]
- var mouseLeaveFunction = function(){
- &nbs