• 一周学会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
  • 相关阅读:
    ReentrantLock与Condition构造有界缓存队列与数据栈
    ReentrantLock
    文件下载
    scala初学
    bootstrap table 显示连续序号,分页有效
    web中servletcontext和applicationContext
    checkbox是否选中判断
    bookstrap form表单简单-smart-form
    charts柱状图,定时刷新
    js对象和json的区别
  • 原文地址:https://www.cnblogs.com/GaoAnLee/p/5368788.html
走看看 - 开发者的网上家园