今天我們講解一下mt的事件部分,对于事件的讲解主要包含三部分,分别是:绑定,移除,和触发,我们首先来看一个例子

  1. //jquery的事件绑定方式
    $('a').click(function){
    alert('aa');
    });
    //或
    $('a').bind('click,mouseover',function){
    alert('aa');
    });
  2.  
  3. //mt的事件绑定方式
    $('a').addEvent('click',function){
    alert('aa');
    });

    $('a').addEvents({
    'click':function){
    alert('aa');
    },
    'mouseenter':function){
    alert('bb');
    }
    });

通过上边的例子我们可以看出,其实jq的事件绑定方式和mt是很像的,当然了因为mt不需要封装进function(){}内,所以我们还可以直接在节点上写事件,如:

  1. <!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>
  2.  
  3. <body>
    <div id='a' onclick="aa(this,'b')">click</div>        
    <script type='text/javascript'>
  4.  
  5. var aa=function(i,msg){
      alert(i.get('tag')+'|'+i.getProperty('id')+'|'+msg);
    }
    </script>

  在上边的例子中,我把对象本身传递了进来,即this,然后我就可以把它把他理解是已经选择了节点,像操作节点那样去操作他就行了.

  接下来我们主要讲解一下第一种方式,使用第一种方式的时候必须要确保dom节点已经加载完毕,如果因为网络原因导致节点还没有载入,此时绑定事件是会失败的,所以我们可以用下边的方法来避免此问题:

  1. <!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>
  2.  
  3. <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载入完毕之后就给他绑定一个事件,看下边的例子:

  1. <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参数的更多用法看下边的例子:

  1. $('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);
  2.  
  3. //Ctr+S 组合键
    if(event.key == 's' && event.control){
    alert('Document saved.');
    }
    });

那么如何给一个对象绑定多个事件呢,看下边的例子:

  1. var fun1=function(){};
    $('a').addEvents({
    'mouseenter':fun1,
    'mouseleave':function(){}
    });

通过上边的例子我们就已经给a这个节点绑定了两个事件,记得最后一个事件后边不要加逗号,要不然IE会出错.

事件被绑定之后如何移除呢?我们来看例子

  1. var destroy=function(){alert('Boom:'+this.id);}
    $('myElement').addEvent('click',destroy);
    $('myElement').removeEvent('click',destroy);

下边是一个事件触发的例子:

  1. 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允许我们自定义事件,感兴趣的朋友可以研究一下如何自定义事件:

  1. 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)事件的更多相关文章

  1. 一周学会Mootools 1.4中文教程:(7)汇总收尾

    转眼之间已经第七课了,这也将成为最后一课,如果这7课下来您感觉水平没有达到预想的水平,没关系您可以继续关注本站的博文,我会陆续发一些类似的文章帮您提升水平,另外我最近打算和群里的几个Mootools爱 ...

  2. 一周学会Mootools 1.4中文教程:(5)Ajax

    ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成 语法: var myRequest=new Request([参数]); 参数: u ...

  3. 一周学会Mootools 1.4中文教程:序论

    刚才发了几篇Mootools(以后直接简称Moo或Mt,看到这两个名字的时候不要感到奇怪),有一位热心的朋友"追杀"告诉我说现在已经出到1.4了,就不要再纠结于1.2了,想象一下有 ...

  4. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  5. 一周学会Mootools 1.4中文教程:(6)动画

    先看一下动画的参数设置: 参数: fps - (number:默认是50) 每秒的帧数. unit - (string:默认是 false) 单位,可为 'px','em',或 '%'. link - ...

  6. 一周学会Mootools 1.4中文教程:(4)类型

    Mootools的类型主要包含下边几部分:String:字符串;Number:数字;Array:数组;Object:对象;Json:;Cookie:. 这也是我们今天的讲述重点.每一种数据类型Mt都为 ...

  7. 一周学会Mootools 1.4中文教程:(2)函数

    温故: 透过对上一节课的学习,相信大家对mt的选择器应该有了一定的认识了,我再放几个小示例让大家对选择器的复杂应用有所了解: <!DOCTYPE html PUBLIC "-//W3C ...

  8. 一周学会go语言并应用 by王奇疏

    <一周学会go语言并应用> by王奇疏 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 零.安装go语言,配置环境及IDE 这部分内容不多,请参考我的这篇安装环境 ...

  9. webstorm的中文教程和技巧分享

    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享.webstorm8.0.3中文汉化版下载:百度网盘下载:http://pan.baidu.c ...

随机推荐

  1. 一个很好的用C#导出数据到Excel模板的方法

    /// <summary> /// 导数据到Excel模板 /// </summary> /// <param name="tab">要输出内容 ...

  2. Oracle的总体回顾

    1.多表查询:一张以上的表进行查询,称为多表查询,多表查询的时候可以为表指定别名的方式以简化查询列的编写,在多表查询中,会产生笛卡尔积,就是两张表的总数相乘得到的结果,如果要想消除笛卡尔积要通过关联条 ...

  3. Linux解决xhost: unable to open display

    实用技巧:在Linux下设置xhost方法步骤 第一步:用root登陆linux,启动vnc服务: 第二步:根据vnc起来的端口,设置export DISPLAY=localhost:1(1表示vnc ...

  4. 在什么情况下使用exist和in

    http://www.itpub.net/thread-406784-4-1.htmlYou Asked (Jump to Tom's latest followup) Tom: can you gi ...

  5. Linux下为何都是文件的理解

    所谓“文件”,就是在我们的电脑中,以实现某种功能.或某个软件的部分功能为目的而定义的一个单位. Linux都是以文件的形式存在,当我们访问某个文件(Linux中的文件有目录,连接,普通文本),由于Li ...

  6. shell基础认识

    Shell 我们在终端下写命令Linux内核是看不懂的必须通过shell解释成内核可执行的代码 这就是shell(其实解释命令这只是它的一个功能模块,shell还可以用来进行程序设计) 有点类似win ...

  7. CSS超链接-光标-缩放

    CSS超链接-光标-缩放 1.CSS 中链接的使用2.CSS 中光标的使用3.CSS 中缩放的使用 1.CSS 中链接的使用超链接伪类属性a:link    表示该超链接文字尚未被点选a:visite ...

  8. Stream与byte转换

    将 Stream 转成 byte[] /// <summary> /// 将 Stream 转成 byte[] /// </summary> public byte[] Str ...

  9. 【Chromium中文文档】跨进程通信 (IPC)

    跨进程通信 (IPC) 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture/I ...

  10. SQL Server 查看一个表上的索引

    方法:1 sys.indexes index_id =0:堆 index_id =1:聚集索引 index_id =2.....:非聚集索引 ----------------------------- ...