ExtJS 事件笔记

1、浏览器事件浅析
    内联式登记(inline):以标记混合于脚本为特征
    传统式登记:无法为事件源练习登记不同的事件
    IE式登记:element.attachEvent("onclick",function(){}),事件名称是以"on"开头的完整形式,事件流的传播顺序是固定的,只能单向的由内至外的传播事件
    DOM Level 2 式登记:
        在兼容W3C规范的浏览器中,此方法是element.addEventListener()
        比 IE 浏览器增加了捕获(Capture)的事件流传播方式
        语法形如: button.addEventListener("click",popUp,true|false)
            参数1是事件名称click
            参数2是popUp处理函数
            参数3是useCapture,是一个布尔值,决定是否使用"捕获"事件流,如果为true,则浏览器使用捕捉方式,false的话是上报,即冒泡
    事件对象
        在IE中,事件对象是作为一个全局变量来保存和维护的。所有的浏览器事件一旦触发,都会更新window.event对象
            所以不论何时何地,只要调用window.event便可以获取事件对象
        Firefox等W3C事件模型是把事件对象作为参数,出现在对应的处理函数中
       
        事件目标对象W3C称为target,而Microsoft称为srcElement

2、事件与函数
    //Function.call()/apply()
    var testvar = 'window属性';
    var o1 = {
        testvar:'1',
        fun:function(){
            alert('o1' + this.testvar);
        }
    };
       
    var o2 = {
        testvar:'2',
        fun:function(){
            alert('o2' + this.testvar);
        }
    };
       
    o1.fun();
    o2.fun();
       
    //因为call的调用,使this变为o2,而非o1,这就是修改作用域的缘故,call相当于系统提供的方法,严格的说,属于JavaScript语言核心为obj.func提供的内建方法
    //无论是哪一个函数,只要 typeof foo == 'function' 是成立的,自然拥有call()方法,强制执行,立刻执行
    o1.fun.call(o2);   
   
   
    回调函数的特点是写好函数后,不立刻执行,而是将函数作为一种变量去传值
    函数一个lambda表达式,既然表达式含有运算过程,那么函数的参数就可以有不同的形式
   
    Ext在登记处理函数的过程中所做的事情,是为处理函数提供一个统一一致的事件接口,实现跨浏览器特性,并包括增加/移除处理函数的维护
   
    这些策略都封装在Ext.EventManager的单体类(singleton),最典型、能说明跨浏览器的应用当数事件对象(EventObject)
    每次触发EventHandler,该事件对象都会被作为参数被传入,以备在EventHandler获取这次触发事件的相关信息(IE除外)
   
    相对于上层应用,Ext.lib.Event 解决了最底层跨浏览器方面的判断
   
    为处理函数自定义输入参数,可以归纳为一下 3 种方法
        1、简单返回Function
            相对于Event Handler加了一层"壳(shell)",把参数转化为闭包内的成员,然后随机返回函数,符合处理函数的必定为JavaScript的Function类型即可
            el.on('click',function shell(arg1,arg2,……));    //按照一般调用函数的形式加入你的参数
           
            function shell(arg1,arg2,……)
            {
                return function()    //返回的是真正的Event Handler
                {
                    //arg1 、arg2 仍然可以使用,在同一闭包内的缘故
                }
            }
           
        2、在scope参数中指定
            每一个处理函数都可以分配一个作用域的对象。EventManager 留有 scope 的参数,待输入作用域,可以把任意一个对象作为自定义的作用域
            通常为addListener/on方法的第三个参数,当处理函数执行时,this指向的对象紧贴着处理函数的参数后面的第3个参数来指定
            var el = Ext.get('somelink');
            var scope = {
                myID : 'id-998'
            };
           
            el.on('click',function(){
                alert(this.myID);},scope);
       
        3、创建函数委托 Function.prototype.createDelegate()
            createDelegate()是Ext对函数的拓展方法(Function.prototype.createDelegate())
            改变当前函数内部的this作用域也是该方法的基本功能,返回类型为Function值
            该方法的三个参数说明如下
            1、obj,方法createDelegate()会保证函数是运行在这个参数的作用域(scope)中
            2、args,参数列表,类型要求是数组
            3、appendArgs,Boolean或Number
                如果是Boolean类型的,且为true,那么args参数将跟在调用代理时传入的参数后面组成数组,一起传入当前方法,否则只传入args
                如果是Number类型的,那么args将插入到appendArgs指定的位置
               
                createDelegate方法需要绑定一个作用域的对象(this),若登记事件的时候scope参数就指定了作用域对象,则显得有点重复了,那就不必使用createDelegate方法
       
    Ext 的事件
        通常有处理函数的地方就必定有作用域的指定(scope),或者事件颗粒控制(Object Options)
        有时以on/addListener方法登记事件,有时以handler/fn的配置项登记事件
       
        1、使用addListener()/on()登记
            语法为    Obj.on/Obj.addListener(String eventName, Function fn, [Object Scope], [Object Options])
            可以在元素获取后或组件实例化之后登记,也可以在类构造器中登记(this对象指针引出该方法)
            该方法的特点是使用配置项Config对象,即JavaScript中"Object Literal对象字面化"形式定义
   
            //常见于MsgBox的事件注册
            {
                ...,
                fn:function(){},
                ...
            }
            //常见于工具栏(Toolbar)按钮的事件注册
            {
                ...,
                handler:function(){},
                scope:...,
                ...
            }
   
        2、组合式多事件登记
            /* 当前上下文为panel的配置项 */
            {
                ...,
                listeners:{
                    'collpase':function(obj){alert("闭合");},
                    'expand':function(obj){alert("展开");}
                },
                ...
            }
           
            //可指定scope、option config
            listeners:{
                'expand':{
                    fn:function(obj){alert("展开");}
                },
                scope:this
            }
           
            /* el是某个HTML元素Ext.Element实例 */
            el.on({
                'click':{
                    fn:this.onClick,
                    scope:this,
                    delay:100
                },
                'mouseover':{
                    fn:this.onMouseOver,
                    scope:this
                },
                'mouseout':{
                    fn:this.onMouseOut,
                    scope:this
                }
            });
   
            //或者是一下的简捷语法
            el.on({
                'click':this.onClick,
                'mouseover':this.onMouseOver,
                'mouseout':this.onMouseOut,
                scope:this
            });
   
        3、使用Ext.addBehaviors()方法登记事件
            Ext.addBehaviors({
                //为id为foo的锚点元素增加onclick事件监听
                '#foo a@click':function(e,t){},
                //为多个元素增加mouseover事件监听,(用','分隔多个选择器,事件名以@附在结尾)
                '#foo a,#bar span.some-class@mouseover':function(){}
            });
   
        4、关于Ext.onReady事件
       
        5、登记事件的第4个参数——事件选项
            事件登记方法的第4个参数options是一个针对处理函数配置属性的对象
            选项                    选项类型        选项描述
            scope                    Object            处理函数执行时所在的作用域。处理函数this的上下文
            delegate                String            一个简易的CSS选择符,用于过滤目标,或是查找目标的子孙元素
            stopEvent                Boolean            true表示阻止事件。即停止传播、阻止默认动作
            preventDefault            Boolean            true表示阻止默认动作
            stopPropagation            Boolean            true表示阻止事件传播
            Normalized                Boolean            false表示对处理函数传入一个浏览器对象代替Ext.EventObject
            delay                    Number            触发事件后开始执行处理函数的延时时间。单位:毫秒
            single                    Boolean            true表示下次事件触发加入一个要处理的处理函数,然后再移除本身
            buffer                    Number            它的作用是执行缓冲,防止用户情绪失控(如数秒内返回点击几十次)下的冗余操作
       
3、高级事件及其控制
   
4、键盘事件
    Ext.KeyNav 导航键的映射类
    Ext.KeyMap 出导航键外剩下的键有字母键、功能键、Alt/Shift/Ctrl的修饰键
    接口一致,只要传入元素对象、键盘是哪些、具体处理函数,即可完成目的快捷键的定义
    元素对象必须是可以获得焦点的元素,比如<input>、<textarea>等
           
    也可以使用Ext.Element.addkeyMap(config),config 就是一个键盘事件的定义,返回的是Ext.KeyMap实例
       
    Ext.onReady(function(){
   
        handler = function(keyCode,event)
        {
            alert("元素"+event.target+"接受到按键事件");   
        }
       
        Ext.fly("foo").addKeyListener({
            key:["a",Ext.EventObject.ENTER],//数组类型表示这是多个键同时按下的组合键,反之为单一键响应
            shift:true//是否包含Alt/Shift/Ctrl的组合键
        },handler);
        /*
            常用方法
            key:"a\r\n\t"
            key:[10,13],
            key:"abc"    按了a或b或c
            key:"\t"
        */
    });   
        //回车键提交表单,貌似会重复触发三次
        function submitForm()
        {
            alert("开始提交表单啦");
        }
       
        var simpleForm = new Ext.form.FormPanel({
            buttons:[{
                text:'确定',
                handler:submitForm
            },{
                text:'取消'
            }],
            keys:[{
                key:Ext.EventObject.ENTER,
                fn:submitForm,//用户按下回车为执行提交表单
                scope:this
            }]
        });
       
        simpleForm.render(Ext.getBody());

知识共享许可协议
《ExtJS 事件笔记》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     179.61ms