Mootools 1.2教程事件处理

网络编程 2024/11/17 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

今天我们开始第五讲，在上一讲（《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'" />

评论“Mootools 1.2教程事件处理”

暂无评论...

Mootools 1.2教程事件处理

更多学习……

Mootools,事件处理

通过Mootools 1.2来操纵HTML DOM元素

Mootools 1.2教程函数

评论“Mootools 1.2教程事件处理”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

Mootools 1.2教程 事件处理

更多学习……

Mootools,事件处理

通过Mootools 1.2来操纵HTML DOM元素

Mootools 1.2教程 函数

评论“Mootools 1.2教程 事件处理”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接

Mootools 1.2教程事件处理

Mootools 1.2教程函数

评论“Mootools 1.2教程事件处理”