JS注册/移除事件处理程序(ExtJS应用程序设计实战)

在设计ExtJS应用程序时最常做的事情就是注册事件处理程序，因为在ExtJS的世界里，几乎完全由时间组成。因此，ExtJS的设计者使注册事件变得非常容易(同时还提供了非常不容易的方式任你选择)——on/un，也就是上与下两种方式，或是addListener与removeListener，Element的所有子类都可以使用。例如有一个<div/>希望在用户按下时能够给予简单的反馈：
<divid="happyDiv"class="happyStyle"/>
如何替这个<div/>注册鼠标单击事件呢？首先必须取得这个div的Element实例：
varhappyDiv=Ext.get('happyDiv');
然后是定义事件处理程序：


代码如下:

varclickHandler=function(event,eventTarget){
Ext.MessageBox.alert("Click","Youclicked:"+eventTarget.id);
}

再用on()将事件处理函数与Element实例连接起来：


代码如下:

happyDiv.on('click',clickHandler);

程序执行时，单击<div/>会出现图3-15所示的结果。
很简单，对吧？示例文件为ch03/event_demo.html。如果要移除这个事件处理程序，只需要把on()改为un()即可。移除时没有对应click事件的事件处理程序也没有关系，底层的EventManager会自行判断。事件处理程序被调用时会接收三个参数——event、eventTarget和optionObj，示例中只用到两个，第三个参数会在讨论EventManager时加以说明。这里先将焦点放在event与eventTarget上，event的类型是Ext.Event，eventTarget则是HTML元素。浏览器在用户按下<div/>时触发click事件并且调用clickHanlder()，对于clickHanlder()而言，接收到的event就是浏览器触发的click事件。evnetTarget就是事件目标，也就是<div/>，eventTarget.id的值就是“happyDiv”。至于事件的根类，应该去哪里寻找呢？答案

赞 (0)

相关推荐

  • JavaScript事件处理程序(事件侦听器)

    我们知道,javascript与HTML之间的交互是通过事件来实现的,事件就是用户或浏览器自身执行的某种动作,比如click.mounseover.load--,而响应事件的函数就叫做事件处理函数(或事件侦听器). event util test var eventUtil = { addListener: function(element, type, hander) { if (element.addEventListener) { element.addEventListener(type

  • 深入理解在JS中通过四种设置事件处理程序的方法

    所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量.但是HTML标签属性注册处理程序就是一个例外.看下面四种方式: 第一种方式(HTML标签属性): <input type="button" id="btn1" value="测试" onclick="alert(this.id);" /> 上面的代码是通过设置HTML标签属性为给

  • js使用函数绑定技术改变事件处理程序的作用域

    js使用函数绑定技术改变事件处理程序的作用域

    第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程

  • 浅谈Javascript事件处理程序的几种方式

    事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q

  • JavaScript高级程序设计 阅读笔记（十七） js事件

    一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的

  • JS注册/移除事件处理程序(ExtJS应用程序设计实战)

    JS注册/移除事件处理程序(ExtJS应用程序设计实战)

    在设计ExtJS应用程序时最常做的事情就是注册事件处理程序,因为在ExtJS的世界里,几乎完全由时间组成.因此,ExtJS的设计者使注册事件变得非常容易(同时还提供了非常不容易的方式任你选择)--on/un,也就是上与下两种方式,或是addListener与removeListener,Element的所有子类都可以使用.例如有一个<div/>希望在用户按下时能够给予简单的反馈: <divid="happyDiv"class="happyStyle"

  • 详解JavaScript中的事件流和事件处理程序

    事件流:分两种,IE的是 事件冒泡流 ,事件开始时从最具体的元素接收,逐级向上传播到较为不具体的节点(Element -> Document).与之相反的是 Netscape 的 事件捕获流 . DOM2级事件规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 大多数情况下都是将事件处理程序添加到事件流的冒泡阶段.一个 EventUtil 的栗子: var EventUtil = { addHandler: function(element, type, handler){ if

  • 分析js闭包引起的事件注册问题

    分析js闭包引起的事件注册问题

    背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1"&

  • js闭包引起的事件注册问题介绍

    js闭包引起的事件注册问题介绍

    背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1"&

  • js 动态给元素添加、移除事件的实现方法

    最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio

  • js事件处理程序跨浏览器解决方案

    本文实例为大家分享了js事件处理程序跨浏览器解决方案,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <input type="button" id="button1" va

  • JS事件流与事件处理程序实例分析

    本文实例讲述了JS事件流与事件处理程序.分享给大家供大家参考,具体如下: 1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流 1.2 Netscape :事件捕获 1.3 DOM事件流 :事件捕获阶段--事件目标阶段--事件冒泡阶段 DOM2级事件规定 :捕获阶段不会涉及目标事件. 2.事件处理程序 事件 :用户或者浏览器自身执行的 某种动作 事件处理程序 :响应某个事件的 函数 . 2.1 HTML事件处理程序 用一个与该事件处理程序同名的HTML特性来指定. 2.1.1包含要执行

随机推荐