一周学会Mootools 1.4中文教程:(3)事件

本文主要是介绍一周学会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 style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
</head>

<body>
<div id='a' οnclick="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中文教程:序论
一周学会Mootools 1.4中文教程:(1)Dom选择器
一周学会Mootools 1.4中文教程:(2)函数
一周学会Mootools 1.4中文教程:(3)事件
一周学会Mootools 1.4中文教程:(4)类型
一周学会Mootools 1.4中文教程:(5)Ajax
一周学会Mootools 1.4中文教程:(6)动画
一周学会Mootools 1.4中文教程:(7)汇总收尾

其他关于Mootools 1.4的文章:
我写的Lightbox效果插件，基于MooTools 1.4
我写的万年历插件(含天干地支,农历,阳历,节气,各种节假日等)，基于MooTools 1.4
我写的类似本站首页左上角的菜单的效果插件，基于MooTools 1.4
Mootools中delay这个延迟函数的高级用法
Mootools中使用bind给函数绑定对象
Mootools中使用extend和implement给你的函数扩展功能或方法
自己写个扩展把Mootools的语法改的和Jquery的语法一模一样
Mootools1.4中自定义事件
用Mootools1.4写了一个随着鼠标移动而背景图也跟着移动的东西