今天我们开始第五讲，在上一讲（《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'" />
左键单击事件
左键单击事件是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,事件处理
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“Mootools 1.2教程 事件处理”评论...
更新动态
2024年11月13日
2024年11月13日
- 群星《唱给女人的歌》24K德国HD金碟[WAV+CUE]
- 孙燕姿.2011-是时候【美妙音乐】【WAV+CUE】
- 苏芮.2003-回首·时代全经典2CD【华纳】【WAV+CUE】
- 梁咏琪.1996-爱自己【EEI】【WAV+CUE】
- IGN经典逆天骚操作名著——《墙头草修炼手册》
- 突然爆火的“网红游戏”，真的有那么多人玩吗？
- 何老师客串《浪人崛起》了？盘点与明星撞脸的角色！
- 【原神】关于星鹫赤羽对珐芙琴班配队下珐露珊主C的适配度分析
- 【原神】V5.1攻略 | 迪西雅角色简评
- 【原神】大日御舆顶端怎么上去
- 胥拉齐《感谢有你》DTS-WAV
- 罗海英《金牌歌后》【WAV+CUE】
- 林叶《林叶·夜》【WAV/分轨】
- 群星《国语经典名曲01》音乐磁场系列[WAV+CUE][1G]
- 齐豫《滚石24K》24K金碟珍藏版系列[低速原抓WAV+分轨][1G]