Menu

30天學會 MooTools 教學(5): 事件處理

今天我們開始第五講，在上一講（30天學會 MooTools 教學(4): 函數和MooTools） 中，我們學習了在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(){ 
    // 在這裡添加事件發生時你要執行的任何代碼 
    alert('this element now recognizes the mouse leave event'); 
} 
  
window.addEvent('domready', function() { 
   $('id_name').addEvent('mouseleave', mouseLeaveFunction); 
});


刪除一個事件

總有一些時候，你一旦不再需要那些事件，於是你需要從一個元素上刪除一個事件。刪除一個事件和添加一個事件一樣容易，甚至連結構都是類似的。 

// 和前一個示例一樣 
// 只不過把.addEvent換成了.removeEvent 
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);


textarea或者input中的按鍵事件

MooTools也可以讓你識別文本域（textarea）和文本框（input）中的按鍵事件。其語法和我們上面看到的類似： 

var function = keydownEventFunction () { 
    alert('This textarea can now recognize keystroke events'); 
}; 
  
window.addEvent('domready', function() { 
    $('myTextarea').addEvent('keydown', keydownEventFunction); 
});

上面的代碼將會識別任何按鍵。要針對一個特定的按鍵，我們需要添加一個參數，然後使用一個if語句： 

// 注意涵數括號中的「event」參數 
var keyStrokeEvent = function(event){ 
    // 下面的代碼是說： 
    // 如果按下的鍵為「k」，則做下面的事 
    if (event.key == "k") {   
    alert("This tutorial has been brought you by the letter k.")  
    }; 
} 
  
window.addEvent('domready', function() { 
    $('myInput').addEvent('keydown', keyStrokeEvent); 
});

如果需要其他的控制，比如「shift」鍵和「control」見，語法略有一點不同： 

var keyStrokeEvent = function(event){ 
    // 下面代碼是說： 
    // 如果按下的鍵是「shift」，則做下面的事 
    if (event.shift) {  
    alert("You pressed shift.")  
    }; 
} 
  
window.addEvent('domready', function() { 
    $('myInput').addEvent('keydown', keyStrokeEvent); 
}); 

<div id="body_wrap"> 
    <input id="myInput" type="text" /> 
</div>


示例

這裡是上面我們寫過的一些可以執行的代碼：

注意：你可以在單擊示例上面試一下，不過不是在上面鬆開鼠標，而是把鼠標一直按著從區塊上離開，然後再鬆開。注意一下它沒有觸發點擊事件。 

var keyStrokeEvent = function(event){ 
    // 下面的代碼是說： 
    // 如果按下的鍵為「k」，則做下面的事 
    if (event.key == 'k') {  
        alert("This Mootorial was brought to you by the letter 'k.'")   
    }; 
} 
  
var mouseLeaveFunction = function(){ 
    // 在這裡添加事件發生時你要執行的任何代碼 
    alert('this element now recognizes the mouse leave event'); 
} 
  
var mouseEnterFunction = function(){ 
    // 在這裡添加事件發生時你要執行的任何代碼 
    alert('this element now recognizes the mouse enter event'); 
} 
  
var clickFunction = function(){ 
    // 在這裡添加事件發生時你要執行的任何代碼 
    alert('this element now recognizes the click event'); 
} 
  
window.addEvent('domready', function() { 
    $('click').addEvent('click', clickFunction); 
    $('enter').addEvent('mouseenter', mouseEnterFunction); 
    $('leave').addEvent('mouseleave', mouseLeaveFunction); 
    $('keyevent').addEvent('keydown', keyStrokeEvent); 
}); 

<div id="click" class="block">左鍵單擊（Click）</div><br /> 
<div id="enter" class="block">鼠標進入（Mouse Enter）</div><br /> 
<div id="leave" class="block">鼠標離開（Mouse Leave）</div><br /> 
<input id="keyevent" type="text" value="請輸入字符'k'" />

更多學習……

下載一個包含你開始所需要的所用東西的zip包
包含MooTools 1.2核心庫、一個外部JavaScript文件、一個簡單的html頁面和一個css文件。

 

更多關於事件的資料

MooTools給了你更多的關於事件的控制方法，比我們這裡講得要多得多。要學習更多內容，請查看下面幾個鏈接：

MooTools文檔中的Events部分

MooTools文檔中的Element.Events部分

還有，閱讀一下w3school網站上關於JavaScript事件的內容

 

Mootools 教學列表：