zoukankan      html  css  js  c++  java
  • Extjs学习笔记--(五,事件)

    Extjs中事件包括浏览器事件(单机按钮,鼠标移动等触发)和内部事件(组件之间的联动)

    绑定浏览器事件的过程Ext.EventManager

    要为元素绑定事件,通常会使用EventManager.on方法

    Ext.EventManager.on(el,eventname,fn[,scope,options])

    el要绑定的事件元素,可以为元素的id,element对象获htmlelement对象

    eventname一般情况下是事件的名称,但是在一次定义多个事件时可以是一个对象,当eventname是事件名称时,fn就是事件要触发的函数,当eventname是对象时fn会被忽略

    scope;作用域

    options:事件触发函数的配置对象

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" />
        <script src="Extjs/bootstrap.js"></script>
        <script src="Extjs/locale/ext-lang-zh_CN.js"></script>
    </head>
        <body>
            <input type="text" id="input1" value="请输入"/>
            <input type="text" id="input2" value="请输入"/>
            <input type="text" id="input3" value="请输入"/>
            <script type="text/javascript">
    
                var focus=function(e, el) {
                    if (el.value == '请输入')
                        el.value = '';
                }
                var blur = function (e, el) {
                    if (el.value == '')
                        el.value = '请输入';
                }
                //单项绑定事件
                Ext.EventManager.on("input1", "focus", focus);
                Ext.EventManager.on("input1", "blur", blur);
                //多项同时绑定
                Ext.EventManager.on("input2", {
                    focus: focus,
                    blur:blur
                })
                Ext.EventManager.on("input3", {
                    focus: { fn: focus },
                    blur: { fn: blur }
                })
    
                </script>
    
        </body>
    </html>
    View Code
            
            <div id="div1" style="background:red;height:200px;200px">
                
            </div>
            <script type="text/javascript">
    
                Ext.EventManager.on("div1","click", function(e) {
                    alert(e.getXY());
                }, this, { delay: 3000 });
            </script>

    封装浏览器事件:Ext.EventObject

    浏览器事件都要封装成EventObjectImpl对象的实例才能传递给触发函数

    EventObject是Ext.EventObjectImpl的实例,相当于一个共享的浏览器事件封装对象,使用setEvent方法将浏览器事件封装成EventObject对象   后再传递给触发函数,从而实现跨平台的处理,所以SetEvent是封装浏览器事件的关键方法

    EventObjectImpl对象除了提供了事件的基础属性外,还提供了一系列处理方法

    getCharCode:返回事件的字符编码

    getKey:返回标准化后的键盘代码

    getPageX,getX:返回事件的x坐标

    getPageY,getY:返回事件的y坐标

    getXY:以数组格式返回事件坐标点

    getPoint:以point对象格式返回事件的坐标点

    getRealatedTarget:返回与事件目标节点相关的节点

    getTarget:返回事件目标节点

    getWheelDelta:返回标准化后的鼠标滚轮滚动值

    hasModifier:如果键盘的ctrl,meta,shift,或者alt键按下返回true

    injectEvent:使用EventObject对象的数据和一个新目标注入一个Dom事件

    这是一个多层次的技术,不建议使用

    isNavKeyPress:如果键盘按下的是Pageend,pageup,end,home,箭头键,回车键,tab键,或者esc键,该值为true

    isSpecialKey:如果键盘按下的是isNavKeyPress,ctl,backspace,shift,alt,pause等时,为true

    preventDefault:组织浏览器的默认事件处理

    stopEvent:停止事件,执行preventDefault方法,主要用于阻止浏览器右键菜单,以便使用自己的弹出菜单

    stopPropagation:取消事件传递

    within:检测事件目标是否是指定对象,如果是则返回true,否则返回false

    移除浏览器事件

    EventManager提供了un,removeAll和purgeElement这3种移除浏览器事件的方法

    1,un

    从元素中移除一个事件

    Ext.EventManager.un(el,eventname,fn,scope)

    el是要移除事件的元素,它可以为元素id,element对象或htmlElement对象

    eventname与绑定事件一样,可以为事件名或配置对象,

    fn为要移除的事件,如果没有,则无法移除,

    scope是函数的作用于,必须与绑定事件时一致,方法un是removeListener的简写

    2,removeAll

    从元素中移除所有事件

    Ext.EventManager.removeAll(el)

    el为要移除所有事件的元素

    3,purgeElement

    使用递归方式移除元素及其子节点的事件

    Ext.EventManager.purgeElement(el[,eventname])

    el是要移除事件的元素

    eventname是事件的名称,如果不设置则移除所有事件

    内部事件对象Ext.util.Event

    使用Event对象记录他自己的信息,还提供了绑定时间,移除事件,触发事件和清理缓存或延迟事件等方法,

    要注意的是Event对象提供的方法只是框架内部使用的接口,而不是外部接口,因而不哟啊尝试直接使用这些方法

    1,addListener

    绑定内部事件

    2,removeListener

    移除事件

    3,clearListeners

    使用迭代方式停止所有缓存或延时事件

    4,Fire

    触发事件

    为组件增加事件接口:Ext.util.Observable

    为组件绑定事件

    --1,在创建对象中配置listeners属性

    --2,创建组件后,使用on方法绑定

     为组件触发事件

    --使用fireEvent方法触发事件

    为组件移除事件

    --如果组件存在浏览器事件,则移除事件时同时移除浏览器事件,该操作会使用到Observable对象的removeManagedListener方法

    特定功能的事件对象

    DelayedTask 对象只要勇于实现输入缓冲的功能,在指定的事件间隔内,如果用户没有处罚事件,就会执行实际触发函数

    DelayedTask对象提供了一下两个方法:

    cancel:取消最后的队列任务

    delay:取消当前的任务,开始一个新的任务

    一般任务:Ext.util.TaskRunner与Ext.TaskManager

    taskManager对象时TaskRunner对象的一个实例,因而可以直接使用TaskManager对象执行任务

    run:任务出发时执行的函数

    interval:触发任务的时间间隔,单位是毫秒

    args:可选,为传递给触发函数的参数数组

    scope:可选,触发函数的作用域

    duration:可选,任务运行事件超过该值指定的时间后,任务会自动停止,其单位为毫秒

    repeat:可选,为任务可执行的次数,超过此指定的次数,任务会 自动停止

    TaskRunner对象提供了Start,stop,stopAll三个方法操作任务

    封装好的单机事件:Ext.util.ClickRepeater

    封装单机事件的作用是简化代码的书写

    ClickRepeater对象时从Observable对象继承的对象因而拥有Observable对象的所有成员

    它也定义了自己独有的配置项

    pressCls:单机时应用在元素上的样式名称,可实现特殊效果

    accelerate:布尔值,如果true,interval和delay配置项会被忽略,操作会慢慢开始并逐渐加速

    delay:在该值指定时间后才会再次出发事件

    interval:指定触发事件之间的间隔,默认值是20毫秒

    listeners;可选,为对象,可为事件配置对象,可在这里绑定事件

    preventDefault:布尔值,如果未true,组织默认的单机事件

    stopDefault:布尔值,如果未true,停止默认的单击事件

    键盘事件

    为元素绑定键盘事件:Ext.util.KeyMap

    KeyMap 对象可以为元素设置一些按键,从而实现一些特殊功能,例如,可以在工具栏的按钮上增加向下箭头的按键,让他打开子菜单

    要使用KeyMap对象,可以在创建实例时定义好配置对象或者配置对象数组,也可以在创建后使用addBinding方法来增加,配置对象主要有一下配置项:

    key:触发事件的键盘代码。可以是单一的键盘代码,也可以是键盘代码数组

    shift:布尔值,为true时,可实现与shift键一起的组合键功能

    alt:布尔值,为true时,可以实现与alt键一起的组合键功能

    ctrl:布尔值,为true时,可以实现与ctrl键一起的组合键功能

    handler(fn):事件的触发函数,fn为别名

    scope:触发函数的作用域

    defaultEventAction:事件的默认操作。可以设置为stopEvent,stopPropagation和 preventDefault,如果不设置则没有默认操作 

     可以使用disable,enable和setDisabled开启KeyMap对象,而方法isEnable可返回KeyMap的状态,如果为开启状态,返回true

    Demo--给html增加enter键按下,焦点改变事件

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
            <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" />
        <script src="Extjs/bootstrap.js"></script>
        <script src="Extjs/locale/ext-lang-zh_CN.js"></script>
        <style>
            #form1 span{ height: 30px;width: 200px;display: block;}
        </style>
       
    </head>
        <body>
            <div style="margin:20px 0 0 20px">
                <form id="form1">
                    
                    <span>姓名:<input name="name" type="text" value=""/></span>
                    <span>性别:<input name="sex" type="radio" value="男"/><input name="sex" type="radio" value="女"/></span>
                    <span>电子邮件:<input type="text" name="email" value=""/></span>
                    <span>个人简介:<textarea name="itro"></textarea></span>
    
                </form>
    
            </div>
              <script type="text/javascript">
                  var els = Ext.query("#form1 input,textarea");
                  Ext.create("Ext.util.KeyMap", "form1", {
                      key: 13,
                      fn: function (key, e) {
                          var el = e.target, target = els, ln = target.length;
                          for (var i = 0; i < ln; i++) {
                              if (target[i] == el) {
                                  if (i + 1 == ln) {
                                      target[0].focus();
                                  } else {
                                      target[i + 1].focus();
                                  }
                              }
                          }
                      },
                      scope: Ext.getDom("form1")
                  });
            </script>
        </body>
    View Code

     键盘导航:Ext.util.KeyNav

    KeyNav的作用是封装键盘导航事件,从而轻松的在页面中设置键盘导航。可用的导航包括回车键,空格键,4个方向键,tab键,esc键,pageup,pagedown,del,backspace,home,end

    与keymap对象一样,KeyNav也可以通过disabled,enable和setDisabled三个方法开启或关闭其功能

  • 相关阅读:
    [考试反思]0511省选模拟93:平衡
    [考试反思]0509省选模拟92:警示
    [考试反思]0508省选模拟91:小雨
    [考试反思]0507省选模拟90:信任
    [考试反思]0506省选模拟89:无事
    [专题总结]2-sat及题目&题解(3/5 complete)
    [考试反思]0505省选模拟88:滑稽
    [考试反思]0504省选模拟87:开花
    [考试反思]0502省选模拟86:恐惧
    [考试反思]0501省选模拟85:低落
  • 原文地址:https://www.cnblogs.com/anbylau2130/p/3585029.html
Copyright © 2011-2022 走看看