Mootools 1.2教程 事件处理


Posted in Javascript onSeptember 15, 2009

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

更多学习……

下载一个包含你开始所需要的所用东西的zip包

包含MooTools 1.2核心库、一个外部JavaScript文件、一个简单的html页面和一个css文件。

更多关于事件的资料

MooTools给了你更多的关于事件的控制方法,比我们这里讲得要多得多。要学习更多内容,请查看下面几个链接:

  • MooTools文档中的Events部分
  • MooTools文档中的Element.Events部分
  • 还有,阅读一下w3school网站上关于JavaScript事件的内容
Javascript 相关文章推荐
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
浅谈React碰到v-if
Nov 04 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
JS运算符简单用法示例
Jan 19 Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
You might like
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP连接access数据库
2015/03/27 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JavaScript实现简单图片滚动附源码下载
2014/06/17 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
求职信模板怎么做
2014/01/26 职场文书
万年牢教学反思
2014/02/15 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
国旗下的演讲稿
2014/05/08 职场文书
签约仪式策划方案
2014/06/02 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang