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:事件触发函数的配置对象

 

Extjs学习笔记--(五,事件)

Extjs学习笔记--(五,事件)
<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
Extjs学习笔记--(五,事件)
        
        <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>
Extjs学习笔记--(五,事件)

 

封装浏览器事件: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方法绑定

Extjs学习笔记--(五,事件),布布扣,bubuko.com

Extjs学习笔记--(五,事件)

上一篇:Javascript寻找Dom节点


下一篇:基于SpringBoot整合SpringCloud微服务框架--Eureka注册中心及Feign远程调用/Ribbon负载均衡