MooTools教程(5):事件處理

時間 2019-11-11

標籤 mootools 教程事件處理简体版

原文原文鏈接

今天咱們開始第五講，在上一講（《Mootools 1.2教程(4)——函數》）中，咱們學習了在MooTools 1.2中創建和使用函數的幾種不一樣方式。下一步就是理解事件了。和選擇器相似，事件也是創建互動界面的一個重要部分。一旦你掌握了一個元素，你須要去決定什麼行爲來觸發什麼效果。先把效果留着之後在講，咱們首先看一看中間步驟和一些常見的事件。
左鍵單擊事件
左鍵單擊事件是web開發中最多見的事件。超連接識別點擊事件，而後把你帶到另一個URL地址。MooTools可以識別其餘DOM元素上的點擊事件，在設計和功能上給了你極大的靈活性。給一個元素添加一個點擊事件的第一步：css

// 經過$('id_name') 取得一個元素
// 用.addEvent添加事件
// ('click')定義了事件的類型
$('id_name').addEvent('click', function(){
// 在這裏添加點擊事件發生時你要執行的任何代碼
alert('this element now recognizes the click event');
});

你也能夠把這個函數從.addEvent();獨立出來來完成相同的事情：html

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。
和之前同樣，咱們要作的第一件事就是把一個事件附加到一個元素：web

var mouseEnterFunction = function(){
// 在這裏添加事件發生時你要執行的任何代碼
alert('this element now recognizes the mouse enter event');
}

window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});

鼠標離開事件也是一樣的，這個事件在鼠標指針離開一個元素時發生。dom

var mouseLeaveFunction = function(){
// 在這裏添加事件發生時你要執行的任何代碼
alert('this element now recognizes the mouse leave event');
}

window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

刪除一個事件
總有一些時候，你一旦再也不須要那些事件，因而你須要從一個元素上刪除一個事件。刪除一個事件和添加一個事件同樣容易，甚至連結構都是相似的。ide

// 和前一個示例同樣
// 只不過把.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>

更多學習……
下載一個包含你開始所須要的所用東西的zip包
包含MooTools 1.2核心庫、一個外部JavaScript文件、一個簡單的html頁面和一個css文件。
更多關於事件的資料
MooTools給了你更多的關於事件的控制方法，比咱們這裏講得要多得多。要學習更多內容，請查看下面幾個連接：
MooTools文檔中的Events部分
MooTools文檔中的Element.Events部分
還有，閱讀一下w3school網站上關於JavaScript事件的內容網站