一周学会Mootools 1.4中文教程:(3)事件
今天我們講解一下mt的事件部分,对于事件的讲解主要包含三部分,分别是:绑定,移除,和触发,我们首先来看一个例子
//jquery的事件绑定方式
$('a').click(function){
alert('aa');
});
//或
$('a').bind('click,mouseover',function){
alert('aa');
}); //mt的事件绑定方式
$('a').addEvent('click',function){
alert('aa');
});
或
$('a').addEvents({
'click':function){
alert('aa');
},
'mouseenter':function){
alert('bb');
}
});
通过上边的例子我们可以看出,其实jq的事件绑定方式和mt是很像的,当然了因为mt不需要封装进function(){}内,所以我们还可以直接在节点上写事件,如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
</head> <body>
<div id='a' onclick="aa(this,'b')">click</div>
<script type='text/javascript'> var aa=function(i,msg){
alert(i.get('tag')+'|'+i.getProperty('id')+'|'+msg);
}
</script>
在上边的例子中,我把对象本身传递了进来,即this,然后我就可以把它把他理解是已经选择了节点,像操作节点那样去操作他就行了.
接下来我们主要讲解一下第一种方式,使用第一种方式的时候必须要确保dom节点已经加载完毕,如果因为网络原因导致节点还没有载入,此时绑定事件是会失败的,所以我们可以用下边的方法来避免此问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
</head> <body>
<div id='a' onclick="aa(this,'b')">click</div>
<script type='text/javascript'>
window.addEvent('domready',function(){
alert('先执行');
});
window.addEvent('load',function(){
alert('后执行');
});
</script>
上边的例子中domready事件会在onload之前被执行,这一点请注意,onload是在所有的dom节点载入完毕之后才执行,所以domready在dom节点载入完毕之前就已经执行了.必须要谨记的是,load在一个页面内只能出现一次,而domready则可以多次使用.否则IE会不爽你.
那么我们现在要做的是当a载入完毕之后就给他绑定一个事件,看下边的例子:
<body>
<a href='http://www.google.com' id='a'>click</a>
<script type='text/javascript'>
window.addEvent('load',function(){
var aa=function(event){
event.stop();
alert('aa1');
}
$('a').addEvent('click',aa);
});
</script>
或
<body>
<a href='http://www.google.com' id='a'>click</a>
<script type='text/javascript'>
window.addEvent('load',function(){
$('a').addEvent('click',function(event){
event.stop();
alert('aa1');
});
});
</script>
如果你能确认a节点已经载入完成了,那么load事件你可以省略,即:
<body>
<a href='http://www.google.com' id='a'>click</a>
<script type='text/javascript'>
$('a').addEvent('click',function(event){
event.stop();
alert(event.target);//对象本身,开发插件很有用
alert(event.relatedTarget);
alert(event.key);//returns the lowercase letter pressed.
alert(event.shift);//returns true if the key pressed is shift.
alert('aa1');
});
</script>
上边的例子中,我为了防止a被超链接至google,所以我传递event参数,并用event.stop()来阻塞默认事件.关于event参数的更多用法看下边的例子:
$('i7').addEvent('keypress',function(event){
alert(event.key);
alert('code:'+event.code);//按键的键盘代码
alert('shift:'+event.shift);
alert('control:'+event.control);
alert('alt:'+event.alt);
alert('meta:'+event.meta);
//Ctr+S 组合键
if(event.key == 's' && event.control){
alert('Document saved.');
}
});
那么如何给一个对象绑定多个事件呢,看下边的例子:
var fun1=function(){};
$('a').addEvents({
'mouseenter':fun1,
'mouseleave':function(){}
});
通过上边的例子我们就已经给a这个节点绑定了两个事件,记得最后一个事件后边不要加逗号,要不然IE会出错.
事件被绑定之后如何移除呢?我们来看例子
var destroy=function(){alert('Boom:'+this.id);}
$('myElement').addEvent('click',destroy);
$('myElement').removeEvent('click',destroy);
下边是一个事件触发的例子:
var txt=$('i7');
txt.addEvents({
'focus':function(){
if(txt.value.contains('Type here')) txt.value='';
},
'keyup':function(){
if(txt.value.contains('hello')){txt.fireEvent('burn','hello world!');}
else if(txt.value.contains('moo')){txt.fireEvent('burn','mootools!');}
else if(txt.value.contains('22')){txt.fireEvent('burn','Italy!');}
else if(txt.value.contains('33')){txt.fireEvent('burn','fireEvent');}
else if(txt.value.contains('q')){txt.fireEvent('burn',"I'm a bit late!",1000);}
},
'burn':function(text){
alert(text+'|'+txt.value);
txt.value='';
}
});
下边列出了一些常用的事件名称,当然了mt允许我们自定义事件,感兴趣的朋友可以研究一下如何自定义事件:
domready
load
unload
beforeunload
selectstart
selectend
keypress
blur
change
click
dblclick
focus
focusin
focusout
keydown
keypress
keyup
keyup
scrollTo:滚动到
scroll:滚动时
resize:改变尺寸时
move
reset
submit
error
abort
mousemove
mouseout
mouseover
mouseup
mousedown
mouseenter:鼠标进入后,弥补mouseover的问题
mouseleave:鼠标离开后
mousewheel:滚动后
contextmenu:点右键后
DOMMouseScroll
DOMContentLoaded
readystatechange
一周学会Mootools 1.4中文教程:(3)事件的更多相关文章
- 一周学会Mootools 1.4中文教程:(7)汇总收尾
转眼之间已经第七课了,这也将成为最后一课,如果这7课下来您感觉水平没有达到预想的水平,没关系您可以继续关注本站的博文,我会陆续发一些类似的文章帮您提升水平,另外我最近打算和群里的几个Mootools爱 ...
- 一周学会Mootools 1.4中文教程:(5)Ajax
ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成 语法: var myRequest=new Request([参数]); 参数: u ...
- 一周学会Mootools 1.4中文教程:序论
刚才发了几篇Mootools(以后直接简称Moo或Mt,看到这两个名字的时候不要感到奇怪),有一位热心的朋友"追杀"告诉我说现在已经出到1.4了,就不要再纠结于1.2了,想象一下有 ...
- 一周学会Mootools 1.4中文教程:(1)Dom选择器
利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...
- 一周学会Mootools 1.4中文教程:(6)动画
先看一下动画的参数设置: 参数: fps - (number:默认是50) 每秒的帧数. unit - (string:默认是 false) 单位,可为 'px','em',或 '%'. link - ...
- 一周学会Mootools 1.4中文教程:(4)类型
Mootools的类型主要包含下边几部分:String:字符串;Number:数字;Array:数组;Object:对象;Json:;Cookie:. 这也是我们今天的讲述重点.每一种数据类型Mt都为 ...
- 一周学会Mootools 1.4中文教程:(2)函数
温故: 透过对上一节课的学习,相信大家对mt的选择器应该有了一定的认识了,我再放几个小示例让大家对选择器的复杂应用有所了解: <!DOCTYPE html PUBLIC "-//W3C ...
- 一周学会go语言并应用 by王奇疏
<一周学会go语言并应用> by王奇疏 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 零.安装go语言,配置环境及IDE 这部分内容不多,请参考我的这篇安装环境 ...
- webstorm的中文教程和技巧分享
webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享.webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.c ...
随机推荐
- Adroid: getExternalStorageDirectory 不一定是你想要的外部存储SdCard
前情提要:我的测试机是华为荣耀6,我装过一个16G的内存卡 因为要面试的需要,我的一个演示项目用的是android本地的WebService.然而写好的webService部署到本地上,应用怎么获取数 ...
- Nicholas C. Zakas如何面试前端工程师
转载自:http://www.cnblogs.com/yizuierguo/archive/2010/02/04/1663767.html Original Post:Interviewing the ...
- poj1487
题目大意: 给一棵递归树,看链接图片,从根节点开始对于每个节点往它的子节点移动,直到叶子节点停止.每个节点选哪一个孩子节点继续往下走是随机的(等概率).然后叶子节点都会标记一个数值,记为走到该节点的得 ...
- 加密传输SSL协议3_非对称加密
困死了,这里对非对称加密体系开个头,具体的实验明天写 非对称加密体系 为了解决对称加密中密钥的传输的问题,一些天才的数学家就提出了非对称式的加密体系,也称为公钥加密体系. 加密和解密的密钥是不同的.一 ...
- leetcode Search Insert Position Python
#Given a sorted array and a target value, return the index if the target is found. If #not, return t ...
- php 接收curl json 数据
curl -H "Content-Type: application/json" http://127.0.0.1:8000 -X POST -d 'xxxx' php $strP ...
- JVM学习之类的卸载机制
类的生命周期 当Sample类被加载.连接和初始化后,它的生命周期就开始了,当代表Sample类的Class对象不再被引用,即不可触及时,Class对象就会结束生命周期,Sample类在方法区内的数据 ...
- 监控mysql执行的sql语句
linux平台 监控mysql执行的sql语句 为了做好配合开发做性能和功能测试,方便监控正在执行的sql语句, 可以在/etc/mysqld中添加如下: log =/usr/local/mys ...
- Android ProgressBar实现加载进度条
progressBar Android进度条组件. progressBar的关键属性: android:max="100" 最大显示进度条 andr ...
- python3--(变量）
变量: Python 是动态类型语言, 也就是说不需要预先声明变量的类型.变量是对象的引用,变量只是将指针指向了对象所在的内存地址.变量的类型和值在赋值那一刻被初始化. 变量起名: 1.显式--> ...