快捷導(dǎo)航

Mootools 1.2教程事件處理

更新時(shí)間：2009年09月15日 18:37:44 作者：

我們學(xué)習(xí)了在MooTools 1.2中建立和使用函數(shù)的幾種不同方式。下一步就是理解事件了。和選擇器類似，事件也是建立互動(dòng)界面的一個(gè)重要部分。

今天我們開始第五講，在上一講（《Mootools 1.2教程(4)——函數(shù)》）中，我們學(xué)習(xí)了在MooTools 1.2中建立和使用函數(shù)的幾種不同方式。下一步就是理解事件了。和選擇器類似，事件也是建立互動(dòng)界面的一個(gè)重要部分。一旦你掌握了一個(gè)元素，你需要去決定什么行為來觸發(fā)什么效果。先把效果留著以后在講，我們首先看一看中間步驟和一些常見的事件。
左鍵單擊事件
左鍵單擊事件是web開發(fā)中最常見的事件。超鏈接識(shí)別點(diǎn)擊事件，然后把你帶到另外一個(gè)URL地址。MooTools能夠識(shí)別其他DOM元素上的點(diǎn)擊事件，在設(shè)計(jì)和功能上給了你極大的靈活性。給一個(gè)元素添加一個(gè)點(diǎn)擊事件的第一步：
參考代碼：

復(fù)制代碼代碼如下:

// 通過$('id_name') 取得一個(gè)元素 
// 用.addEvent添加事件 
// ('click')定義了事件的類型 
$('id_name').addEvent('click', function(){ 
// 在這里添加點(diǎn)擊事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
alert('this element now recognizes the click event'); 
}); 

你也可以把這個(gè)函數(shù)從.addEvent();獨(dú)立出來來完成相同的事情：
參考代碼：

復(fù)制代碼代碼如下:

var clickFunction = function(){ 
// 在這里添加事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
alert('this element now recognizes the click event'); 
} 
window.addEvent('domready', function() { 
$('id_name').addEvent('click', clickFunction); 
}); 

參考代碼：

復(fù)制代碼代碼如下:

<body> 
<div id="id_name"> <! -- this element now recognizes the click event --> 
</div> 
</body> 

注意：和超鏈接識(shí)別點(diǎn)擊事件一樣，MooTools的點(diǎn)擊事件實(shí)際上也是識(shí)別“mouse up”，意味著當(dāng)你鼠標(biāo)松開是發(fā)生，而不是鼠標(biāo)按下去的時(shí)候發(fā)生。這就給了用戶一個(gè)機(jī)會(huì)去改變他們的主意——只要在松開之前把鼠標(biāo)的指針從點(diǎn)擊的元素上移開就可以了。
鼠標(biāo)進(jìn)入和離開事件
當(dāng)鼠標(biāo)停留在一個(gè)鏈接元素上時(shí)，超級(jí)鏈接還識(shí)別“hover”事件。通過MooTools，你可以給其他的DOM元素也添加一個(gè)懸停事件。通過把這個(gè)事件分為鼠標(biāo)進(jìn)入和鼠標(biāo)離開事件，你可以更加靈活地根據(jù)用戶的行為來操控DOM。
和以前一樣，我們要做的第一件事就是把一個(gè)事件附加到一個(gè)元素：
參考代碼：

復(fù)制代碼代碼如下:

var mouseEnterFunction = function(){ 
// 在這里添加事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
alert('this element now recognizes the mouse enter event'); 
} 
window.addEvent('domready', function() { 
$('id_name').addEvent('mouseenter', mouseEnterFunction); 
}); 

鼠標(biāo)離開事件也是同樣的，這個(gè)事件在鼠標(biāo)指針離開一個(gè)元素時(shí)發(fā)生。
參考代碼：

復(fù)制代碼代碼如下:

var mouseLeaveFunction = function(){ 
// 在這里添加事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
alert('this element now recognizes the mouse leave event'); 
} 
window.addEvent('domready', function() { 
$('id_name').addEvent('mouseleave', mouseLeaveFunction); 
}); 

刪除一個(gè)事件
總有一些時(shí)候，你一旦不再需要那些事件，于是你需要從一個(gè)元素上刪除一個(gè)事件。刪除一個(gè)事件和添加一個(gè)事件一樣容易，甚至連結(jié)構(gòu)都是類似的。
參考代碼：
// 和前一個(gè)示例一樣
// 只不過把.addEvent換成了.removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);
textarea或者input中的按鍵事件
MooTools也可以讓你識(shí)別文本域（textarea）和文本框（input）中的按鍵事件。其語法和我們上面看到的類似：
參考代碼：

復(fù)制代碼代碼如下:

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

上面的代碼將會(huì)識(shí)別任何按鍵。要針對(duì)一個(gè)特定的按鍵，我們需要添加一個(gè)參數(shù)，然后使用一個(gè)if語句：
參考代碼：

復(fù)制代碼代碼如下:

// 注意函數(shù)括號(hào)中的“event”參數(shù) 
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”見，語法略有一點(diǎn)不同：
參考代碼：

復(fù)制代碼代碼如下:

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

參考代碼：

復(fù)制代碼代碼如下:

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

示例
這里是上面我們寫過的一些可以執(zhí)行的代碼：
注意：你可以在單擊示例上面試一下，不過不是在上面松開鼠標(biāo)，而是把鼠標(biāo)一直按著從區(qū)塊上離開，然后再松開。注意一下它沒有觸發(fā)點(diǎn)擊事件。
參考代碼：

復(fù)制代碼代碼如下:

var keyStrokeEvent = function(event){ 
// 下面的代碼是說： 
// 如果按下的鍵為“k”，則做下面的事 
if (event.key == 'k') { 
alert("This Mootorial was brought to you by the letter 'k.'") 
}; 
} 
var mouseLeaveFunction = function(){ 
// 在這里添加事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
alert('this element now recognizes the mouse leave event'); 
} 
var mouseEnterFunction = function(){ 
// 在這里添加事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
alert('this element now recognizes the mouse enter event'); 
} 
var clickFunction = function(){ 
// 在這里添加事件發(fā)生時(shí)你要執(zhí)行的任何代碼 
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); 
}); 

參考代碼：

復(fù)制代碼代碼如下:

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