文档介绍：热爱自由职业
牧客网--让自由职业成为一个靠谱的工作
js框架开发之旅--事件
分类: Javascript框架开发之旅 2013-11-02 11:57 94人阅读评论(0) 收藏举报
javascriptweb框架
这一篇我们将介绍事件的工作原理,和不同的框架中事件的实现方法,以及事件接口的设计。我会
在最后选择一种接口的设计,来实现我们的事件功能。
原理事件和Javascript的关系非常密切,你可以想象如果没有事件,页面怎么和用户进行交
互。Javascript一出现的时候,就已经有事件功能了。最早的事件处理时写在html代码里的,如
下:
<a href="/" onclick="alert('Hello World!')">
你之前一定见过这样的写法。scape浏览器里,scape的早期版本如此的受欢迎,微软也实
scape相兼容的事件。
上面的代码在Javascript代码里是这样的:
// assume 'element' is the previous link minus the onclick
= function() { alert('Hello World!'); };
访问事件对象我们可以用下面方法访问事件对象:
function handler(event) {
if (!event) var event = ;
}
,用来记录上一次的事件对象。在一般的程序中,这种做法非常危险,会造成访问
冲突。但是Javascript是单线程的,这种方法在Javascript中是安全的可信赖的。
jQuery中是这样做的:
handle: function( event ) {
var all, handlers, namespaces, namespace_sort = [], namespace_re, events, args = ( arguments );
event = args[0] = ( event || );
停止事件我曾经被默认事件和事件冒泡搞的比较乱,我之前一直以为停止一个事件就是把一切
都停止了。但是,在这里不是这样的。
默认事件
在一个事件处理方法里返回false可以阻止默认事件:
= function() { alert('Hello World!'); return false; };
如果是个a标签,就不会跳到对应的链接了。
1
如果是个a标签,就不会跳到对应的链接了。
捕获和冒泡
如果我们把onclick事件绑定在两个元素上,其中一个是另一个的父节点,我们很难弄清楚哪个方法会优先执行。不
同的浏览器有不同的处理方式。然而,幸运的是我们并不经常会遇到这样的问题,我们更多的是去阻止事件传播。
function handler(event) {
if (!event) var event = ;
= true;
if (