PageTalks

事件代理这个词稍微有些陌生，但是用过jQuery的同学都会知道$.fn.live以及jQuery 1.4之前的一个很有名的插件——$.fn.liveQuery 。在高级的事件处理中，大家不可避免的遇到this关键字指代不明、或者是无法预测事件处理函数执行时的scope。而在一些看不见的地方，复杂的事件监听逻辑下，为了提升性能也不得不用事件的代理。

最简单的事件代理就是将一个方法或函数委托给另外一个对象执行。

var delegator = function(that, func) {
        return function() {
            func.apply(that, arguments);
        };
};

假设我们的一个View中在数据发生改变的时候会被通知，然后需要更新一个列表，但是必须确保这个rebuildList方法在执行的时候，scope是这个View对象，那么我们可以这样：

var updateList = delegator(this, this.rebuildList);
this.model.onRowsInserted.subscribe(updateList);

还有一些delegator的实现方法，甚至直接修改Function的prototype对象来增强函数或方法的功能。

Function.prototype.delegate = function(that) {
	return function() {
		this.apply(that, arguments);
	};
};

除了解决scope的问题，delegate机制更大的作用是将监听器本身的注册到别的对象之上。

jQuery 1.4之后加入的$.proxy() 就是同样实现这样功能的。里面同样是用Function.apply来执行的。

DOM Level 2的事件传播机制是先从document对象开始向目标对象传播，沿途会执行该事件的所有事件处理函数。
到了目标对象本身，也会执行该对象上对该事件的处理函数。
最后，还会再次向document传播，沿途同样会执行该事件的所有事件处理函数。

第一个阶段被成为capture、第二个阶段被成为bubbling。

IE浏览器目前只有bubbling是完美支持的。不管怎么样，我们可以利用这样的bubbling机制让我们的事件管理更加强大——为什么不把事件处理统一放到祖先元素上去呢？
Read More