extjs 中 给组件添加click 事件是怎么关联到dom事件的?

问题描述

var element = Ext.get('domid');var component = Ext.getCmp('domid') 各添加一个click事件element.on('click',function(){});component.on('click',function(){});  extjs源码中显示这两种添加事件方式是不同的。给element上添加事件会最终把事件绑定到dom元素上(最终是调用addEventListener or attachEvent)但是component添加事件只是记录了事件和回调函数的关系,然后fireEvent之后依次调用,并没有涉及到给dom元素添加事件。但是费解的是当你给component添加click时间的时候,却是可以触发的。不解。。。以下是 component 添加事件的行为(使用Observable的addListener)    addListener : function(eventName, fn, scope, o){ var me = this, e, oe, isF, ce; if (ISOBJECT(eventName)) { o = eventName; for (e in o){ oe = o[e]; if (!me.filterOptRe.test(e)) { me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o); } } } else { eventName = eventName.toLowerCase(); ce = me.events[eventName] || TRUE; if (Ext.isBoolean(ce)) { me.events[eventName] = ce = new EXTUTIL.Event(me, eventName); } ce.addListener(fn, scope, ISOBJECT(o) ? o : {}); } } 这是 element添加事件的代码(使用EventManager的addListener,最终会添加click事件到dom上) addListener : function(eventName, fn, scope, options){ Ext.EventManager.on(this.dom, eventName, fn, scope || this, options); return this; }        问题补充:<div class="quote_title">chengjiang_lin 写道</div><div class="quote_div">new EXTUTIL.Event(me, eventName)</div><br /><br />但好像只是给组件加上 事件,我想知道 是怎么和dom联系起来的。<br />new Ext.util.Event 并不会绑定事件到dom上

解决方案

element.on('click',function(){}); 事件会最终把事件绑定到dom元素上component.on('click',function(){}); 事件已经在你NEW一个COMPONENT时绑定到DOM元素上了,只是这些绑定的事件是不允许使用者去修改的,否则的话EXTJ的COMPONENT可能就没法正常运转在NEW 一个COMPONENT时,EXTJS通过DOM元素的事件包装成了自己使用的一整套事件,这些事件就是在EXTJS API文档里可以查询到的当你component.on('click',function(){}); 时就是把一个事件绑定到EXTJS的组件上而不是DOM元素上;
解决方案二:
其实我不太懂你想问什么,如果调用addEventListener or attachEvent你认为是跟dom关联起来了,那你收一下,一定会涉及到。或者说你想问的是浏览器事件的机制?捕获型事件(非IE)、冒泡型事件(所有浏览器都支持)
解决方案三:
new EXTUTIL.Event(me, eventName)

时间: 2024-08-18 00:13:25

extjs 中 给组件添加click 事件是怎么关联到dom事件的?的相关文章

ExtJs中Viewport组件刷新

问题描述 使用Viewport组件怎么解决页面的刷新问题? 解决方案 解决方案二:没明白你的问题

理解javascript中DOM事件_javascript技巧

首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. 最初我们给页面实现点击,就像下面这样的简单操作. 先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为we

DOM 事件流详解

 这篇文章主要详细介绍了DOM中的事件流,包括冒泡型事件.事件监听.标准DOM事件监听这三个方面,十分详细,推荐给大家.     1.冒泡型事件 浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解. (dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事件逐一触发.   代码如下: <body onclick="add('body<br>')"> <div onclick=&qu

DOM事件深入浅出(一)

在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文就将带大家深入浅出地了解DOM事件的那些属性和方法. 首先在介绍DOM事件之前我们先来认识下DOM的不同级别.针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级别与DOM事件 DOM级别一共可以分为4个级别:DOM0级,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级

谈谈我对JavaScript DOM事件的理解_javascript技巧

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. DOM与事件是JavaScript最核

DOM 事件流详解_基础知识

1.冒泡型事件 浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解. (dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事件逐一触发. 复制代码 代码如下:     <body onclick="add('body<br>')">         <div onclick="add('div<br>')">             <

深入理解C#编程中的组件-事件-委托

编程 在组件编程中对事件的理解是十分重要的,C# 中的"事件"是当对象发生某些有趣的事情时,类向该类的客户提供通知的一种方法.与事件联系最为紧密的,个人认为是委托.委托可以将方法引用封装在委托对象内.为了弄清组件-事件-委托三者的关系,本人用实际的例子来谈 谈小弟的理解. 首先创建一个Windows控件项目,添加如下控件样板. 当事件触发时,会传递一个EventArgs类型的参数给事件处理方法,为了能传递自定义的信息,我们可以创建一个继承于EventArgs的事件参数 类,其定义如下:

sencha touch container组件添加单击事件

问题描述 sencha touch container组件添加单击事件 如题 请大神指教 shencha toucha的container的单击事件怎么加 API中没有这个组件的单击事件 请大神指教 解决方案 试下 tap:{ } 记不太清了

Jquery为DIV添加click事件的简单实例_jquery

今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function