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 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
python生成带有表格的图片实例
2019/02/03 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
师范教师毕业鉴定
2014/01/13 职场文书
学术会议邀请函范文
2014/01/22 职场文书
论文指导教师评语
2014/04/28 职场文书
优秀家长自荐材料
2014/08/26 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python