- 浏览: 1431570 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
由于浏览器事件机制的不兼容性,譬如最常见的注册事件差异 ,不常见的事件触发顺序差异 ,以及为了支撑 component infrastructure,基本上常见的类库 YUI3,jquery,extjs 都包含了 event 模块用来注册 dom 事件和实现自定义事件的绑定与触发,理想情况下都希望自定义事件的表现同 dom 事件完全兼容,毕竟javascript不能完全的代替原生代码,虽然 yui3 已经很好的统一了自定义事件与dom事件间的鸿沟,但这是在改变了原生dom事件机制的基础上,这次从一个角度来说一下这个问题。
自定义事件监听器的返回值问题
在组件内部实现中,常常要根据调用者对某些事件的反应来进行一些操作(即AOP的概念),比如:
var Component ={ run:function(){ if(this.fire("beforeRun")==false) { return; } //action } }; Component.on("beforeRun",function(){ if(checkedFalse) return false; });
其中如果调用者不同意某个操作,则在对应操作的触发前事件监听器返回false即可。但是如果存在多个触发前事件监听器,那么各个框架的表现以及与原生dom事件的监听器return false的区别就值得总结:
html结构:
<div id="outer"> <a id="inner" href="javascript:console.log('innner leaving');"> 点我 </a> </div>
Extjs:
dom 事件:
Extjs dom 事件机制直接调用原生注册函数,每个用户的回调函数 a 被包装成另外一个函数 b 用以 normalize 事件,b 函数被浏览器原生的事件注册机制使用,故和原生事件机制表现一致,return false 只用来阻止浏览器的默认行为。
Ext.get("inner").on("click",function(e){ console.log("inner click -1"); return false; }); Ext.get("inner").on("click",function(e){ console.log("inner click -2"); }); Ext.get("outer").on("click",function(e){ console.log("outer click"); });
输出:
inner click -1 inner click -2 outer click innner leaving
自定义事件:
Extjs 自定义事件机制,遵从 observer-listener 模式,fire 时如果一个自定义事件处理函数 return false,那么之后的事件处理函数不再运行,并且 fire 返回false
function test() { test.superclass.constructor.apply(this,arguments); } Ext.extend(test,Ext.util.Observable); var t=new test(); t.on("run",function(){ console.log("custom event run -1"); return false; }); t.on("run",function(){ console.log("custom event run -2"); }); console.log(t.fireEvent("run"));
输出:
custom event run -1 false
YUI3:
dom事件:
YUI3 将自定义事件与dom事件结合在一起,都augment自EventTarget,原理同extjs的自定义事件,故和Extjs的自定义事件表现一致。并且不会阻止冒泡以及停止默认。后面注册的监听器不再调用,但是模拟触发的返回值对于dom事件是没有意义的,simulate没有返回值
PS : return false 同 stopImmediatePropagation 不同之处在于 return false 不会阻止事件冒泡,但stopImmediatePropagation会
var inner=Y.one("#inner"); var outer=Y.one("#outer"); inner.on("click",function(e){ console.log("inner click -1"); return false; }); inner.on("click",function(e){ console.log("inner click -2"); }); outer.on("click",function(e){ console.log("outer click"); }); //Y.Event.simulate(inner._node,"click");
输出:
inner click -1 outer click innner leaving
自定义事件:
原理同dom事件,yui3不同于extjs之处在于对于自定义事件增加了模拟dom事件的冒泡(bubbleTarget),默认处理函数(defaultFn)以及自定义事件独有的广播(broadcast)。
function testCustom(){} Y.augment(testCustom,Y.EventTarget); var t=new testCustom(); t.on("run",function(){ console.log("custom event run -1"); return false; }); t.on("run",function(){ console.log("custom event run -2"); }); console.log(t.fire("run"));
输出:
custom event run -1 false
jquery:
jquery一切以节点为中心(或任何操作要以jquery节点作为开始),自定义事件也必须附加在节点上,触发自定义事件在节点层次中冒泡。KISSY借鉴,dom事件与自定义事件没有区别,触发的返回值为了链式操作返回自身而丧失了aop的依赖判断。
return false 会停止冒泡以及阻止默认行为,但不会阻止后续监听器运行
$("#inner").bind("click",function(){ console.log("inner click -1"); return false; }); $("#inner").bind("click",function(){ console.log("inner click -2"); }); $("#inner").bind("custom",function(){ console.log("inner custom -1"); return false; }); $("#inner").bind("custom",function(){ console.log("inner custom -2"); }); $("#outer").bind("click",function(){ console.log("outer click"); }); $("#outer").bind("custom",function(){ console.log("outer custom"); }); console.log($("#inner").trigger("click")); console.log($("#inner").trigger("custom"));
输出:
inner click -1 inner click -2 [a#inner javascri...aving');] inner custom -1 inner custom -2 [a#inner javascri...aving');]
总结:
return false 在原生dom事件机制中与框架自定义事件机制中存在不少的差异,原生 dom 事件为异步,触发顺序不定,而自定义事件为同步,javascript 自己实现,是否选择统一需要慎重考虑,我的建议则是采用yui3的事件机制来尽可能的统一自定义与dom事件,保持一致性,而return false 在dom事件中禁止使用,用event.preventDefault() 代替,减少使用者的疑惑。
发表评论
-
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8541模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
构建前端 DSL
2012-10-11 22:10 5280目前在传统的软件开 ... -
KISSY kisses bootstrap navbar
2012-08-03 01:12 5952看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅 ... -
promise api 与应用场景
2012-02-07 17:34 7278promise 是 commonjs 社区中提出的异步规范,其 ... -
unified event model
2011-10-14 23:02 1740为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2780简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2783场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2194分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6927作为前端开放的基础安全保证,caja 是目前比较合 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2406这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
just another event model
2011-06-08 20:47 2119事件模型也算是客户端兼容性的一个长期问题,早期 jquery ... -
框架 build 系统介绍
2010-07-11 01:29 1583一个复杂的类库通常都包括很多子模块( jquery@git ... -
querySelectorAll 探讨
2010-07-01 22:35 4383随着css selector engine在越来越多的java ... -
再谈 attribute
2010-06-22 11:37 2559@slideshare 原生: ... -
利用Attribute重构:业务与UI分离
2010-06-08 16:54 1533很简单的一个应用 通过按钮来限制输入范围 ,这样的话再 ... -
yui3 loader的串行加载特性
2010-06-04 12:30 1764yui3 的沙箱机制可以在 ... -
yui3下的load事件触发
2010-06-01 13:31 3156以前的一些总结:页面l ... -
理解YUI3 extension:Base.create
2010-05-31 03:01 1954YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的 ... -
google WebFont Loader 源码阅读
2010-05-22 01:04 2710资料: 关于新发 ... -
jquery yui 对比
2010-04-29 09:58 0http://carlos.bueno.org/jq-yui. ...
相关推荐
Java事件处理机制教学方法探讨.pdf
Java教学中事件处理机制的探讨.pdf
Java事件处理机制教学方法探讨
文中从分析高校突发事件的类型入手,从突发事件具有可预测性、信息沟通不畅以及高校建构信息沟通机制的客观条件等3个方面,对高校建构信息沟通机制的可能性进行了探讨。在此基础上,总结概括出提前发现征兆、正确引导...
本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流、事件处理程序绑定方式、事件对象等。 如何理解事件? JavaScript与HTML之间的交互就是通过事件实现的。 事件:用户或...
一、拟人化来理解android中的事件机制 其实android中的事件传递与处理机制跟我们生活中的事件处理是一样的。这里有一个生活中的例子,很能说明这个问题。阐述如下: 你是一个公司的员工,你的上头有一个主管,主管...
由于各种原因,以太网经常会产生各种二层事件,此时,交换机就必须做相应的处理。本文对二层事件作了描述、介绍了以太网组播中对普通二层事件处理的分析与设计,还探讨了以太网组播中对环路事件处理的分析与设计。
SOA是系统组件化、模块化构建性理论;ED是系统组件之间同步通信,采取事件机制异步化,提高响应速度
本文以包含价值调整机制的2008年至2013年A股上市公司并购事件为样本,旨在探讨管理人员过度自信对业绩增长率和承诺之间的关系的影响。结果表明,过度自信的经理倾向于接受更高的绩效增长率,而这种趋势在民营企业中...
是机器学习研究中的一个新的领域,其动机在于建立、模拟人脑进行分析学习的神经网络,它模仿人脑的机制来解释数据,例如图像,声音和文本。 2016年3月,阿尔法与李世石进行围棋人机大战,以4比1的总比分获胜;2016年...
高密度脂蛋白可通过胆固醇反向转运和其他机制保护心血管疾病并降低心血管疾病的风险。 高密度脂蛋白胆固醇(HDL-C)是心血管疾病阴性事件的独立预测因子。 低浓度的HDL-C表示HDL合成代谢异常。 HDL合成代谢涉及各种...
js事件对象event包括很多事件类型,这里用onclick事件为例,探讨一下在js事件捕获机制和冒泡机制下的执行过程,以及如何阻止事件的捕获和冒泡。 首先看下当我们点击一个元素后,浏览器的执行过程。 1,当某个元素...
通过分析区域地质资料,并结合野外地质调查,探讨了淮北煤田的构造、演化特征及其形成机制。结果表明:(1)以宿北断裂为界将淮北煤田划分为南、北2个构造分区,北区构造线总体走向近SN—NNE,呈向西凸出的弧形展布,以逆冲...
详细描述了ZigBee协议栈的工作机制,包括事件触发、消息传递、处理等
采用关键事件技术,收集了174个关键事件,这些事件被消费者见证的一线服务员工的投诉行为分为3类和9类。 此外,本文还探讨了员工投诉行为对消费者的影响机制,丰富了员工投诉和品牌内部化的理论研究。
时间偏差是并行离散事件模拟中广泛使用的一种同步机制。从事件列表管理、消息取消、乐观性控制、状态保存和恢复、内存管理以及全局虚拟时间计算等几个主要方面对时间偏差的并行离散事件模拟进行了探讨,阐述了其存在...
高校群体性事件是社会深层次矛盾在高校的集中体现,是学生为了表达某种利益...为此,针对加强高校群体性事件预防体系建设的问题进行探讨,只有事前积极准备预案及演练、事中妥善处置、事后及时总结经验教训,才能妥善
对数据库管理问题的探讨 【摘 要】引起数据库安全问题因素有很多,针对这些因素应采用相关的计算机管理技术,以 确保数据库的安全,使其更好的为生产和管理服务。 【关键词】数据库;安全;管理技术 前言 计算机...
因此,当出现网络攻击与安全威胁时,我们只能围绕攻击事件做好事前、事中和事后的防范、检测和过滤防御,缺乏有效的技术支撑手段,无法对攻击者形成真正的打击和管控。 而在IPv6网络的安全体系下,用户、报文和...