Extjs学习笔记--（五，事件）

时间 2019-11-17

标签 extjs 学习笔记事件繁體版

原文原文链接

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

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

要为元素绑定事件，一般会使用EventManager.on方法html

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

el要绑定的事件元素，能够为元素的id，element对象获htmlelement对象bootstrap

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;width:200px">
            
        </div>
        <script type="text/javascript">

            Ext.EventManager.on("div1","click", function(e) {
                alert(e.getXY());
            }, this, { delay: 3000 });
        </script>

封装浏览器事件：Ext.EventObject框架

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

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三个方法开启或关闭其功能