MooTools教程(5):事件處理

2024-07-21 02:04:22

字體：大中小

來源：轉載

供稿：網友

今天我們開始第五講，在上一講（《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(){
// 在這里添加事件發生時你要執行的任何代碼
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'" />

左鍵單擊（click）

鼠標進入（mouse enter）

鼠標離開（mouse leave）

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

MooTools教程(5):事件處理

左鍵單擊事件

鼠標進入和離開事件

刪除一個事件

textarea或者input中的按鍵事件

示例

更多學習……