在前面的8篇文章中，已经介绍了scope的几个方面，比如digest循环，继承机制等。
本篇文章以及后续的两篇文章打算把这块拼图完成，讨论一下scope的另外一项重要功能：事件机制。
主要分为以下6个方面进行讨论：
1. 发布-订阅模式(Publish-Subscribe Pattern)
2. 事件的生命周期-注册和注销
3. 事件与scope继承树-$emit以及$broadcast
4. 事件对象的组成
5. 事件的停止传播以及阻止默认行为
6. 事件在angular框架中的应用
本文首先讨论1-2。下一篇文章中讨论3-5。最后一篇文章讨论6。
发布-订阅模式(Publish-Subscribe Pattern)
这个模式算是设计模式中经典中的经典了。是消息中间件必然要实现的模式之一，也被众多框架以及API所支持。该模式在大规模分布式系统中是不可或缺的，它将系统中的消息产生者和消息消费者解耦开来，提高了系统的可扩展性。关于这个模式的概念和定义，这里就不再赘述了。对这个概念还不熟悉的同学们可以移步这里学习一下：英文Wiki。想看具体代码的同学网上搜索一下相关资料非常多。
那么当上下文变成了angular，发布订阅模式又是如何被实现和应用的呢？
就实现而言，angular的发布订阅模式和其它的各种实现并没有什么本质上的区别，但angular事件系统最重要的不同在于：它已经和scope继承树融为一体了。这也是为什么事件机制会被实现在scope中的原因，毕竟就第一印象而言，谁也不会将事件机制和scope这种数据载体以及继承机制混为一谈。
那么问题来了，事件机制怎么和scope继承树融为一体的呢？嗯，不要心急，待我一一道来。
让我们先看看angular中事件的生命周期，事件是如何注册以及注销的。
事件的生命周期-注册
实现其实不复杂，直接贴上代码一起分析一下：
$on: function(name,listener) {
// listeners字典对象的初始化
var namedListeners = this.$$listeners[name];
if (!namedListeners) {
this.$$listeners[name] = namedListeners = [];
}
namedListeners.push(listener);
// 更新listenerCount计数器字典对象
var current = this;
do {
if (!current.$$listenerCount[name]) {
current.$$listenerCount[name] = 0;
}
current.$$listenerCount[name]++;
} while ((current = current.$parent));
// 提供注销该listener的函数
var self = this;
return function() {
var indexOfListener = namedListeners.indexOf(listener);
if (indexOfListener !== -1) {
namedListeners[indexOfListener] = null;
decrementListenerCount(self,1,name);
}
};
}
// 内部使用的用于减少计数器的方法
function decrementListenerCount(current,count,name) {
do {
current.$$listenerCount[name] -= count;
if (current.$$listenerCount[name] === 0) {
delete current.$$listenerCount[name];
}
} while ((current = current.$parent));
}
首先我们根据文档来看看这个 $on方法的签名：
/** /* @param {string} name 需要监听的事件名称。 * @param {function(event,...args)} 当事件发生时，需要执行的listener回调函数。 * @returns {function()} 返回一个用户注销事件的函数。 */
$on: function(name,listener){}
一目了然，这里在注册事件的时候就考虑到了注销，而采取的策略和在scope中定义watcher一致，都是返回一个注销函数，当需要注销此回调函数的时候调用一下即可。
$on的实现可以分为3个部分：
1. 初始化以及记录回调函数：初始化listeners字典对象并且将回调函数保存到其中。
2. 计数器更新：更新listenerCount计数器字典对象。
3. 返回注销函数：调用后更新listeners字典对象以及listenerCount计数器字典对象。
$on的实现基本没有什么比较晦涩难懂的地方，简洁明了。
至于一些细节部分，不懂的地方仔细体会一下即可。
而上面提到的两个字典对象：listeners和listenerCount，都是在创建子scope的时候就会创建的：
function createChildScopeClass(parent) {
function ChildScope() {
this.$$watchers = this.$$nextSibling =
this.$$childHead = this.$$childTail = null;
this.$$listeners = {}; // 用于保存事件对应的回调函数
this.$$listenerCount = {}; // 用于保存事件对应回调函数的计数器
this.$$watchersCount = 0;
this.$id = nextUid();
this.$$ChildScope = null;
}
ChildScope.prototype = parent;
return ChildScope;
}
事件的生命周期-注销
对于事件的注销，过程上和注册非常相似，只不过正好相反：
return function() {
var indexOfListener = namedListeners.indexOf(listener);
if (indexOfListener !== -1) {
namedListeners[indexOfListener] = null;
decrementListenerCount(self,name);
}
};
在调用注销函数后，首先得到注册的回调函数在数组中的位置，当存在时将其置为空并更新计数器。
总结一下，目前发现的angular中事件的几个特点：
1. 事件保存在scope上，也就是说和scope一样，事件也是拥有一个树形结构的。嗯，这里就可以初步看出angular的事件机制是和scope融为一体的。
2. 除了事件对应的回调函数外，还记录了回调函数的个数。
3. 提供了和watcher注销机制类似的注销机制。
angular事件和浏览器事件
一些题外话。
以上提到的angular事件和浏览器事件(比如，点击事件click，键盘输入事件keydown等)不是一回事。angular事件更多的应用内自定义事件。在使用时，事件的触发和事件的响应都需要由开发人员定义。而浏览器时间则不然，通常开发人员只需要定义响应事件即可，浏览器会帮你触发这些事件。
当需要在angular中定义浏览器事件的相应方法时，通常可以使用angular.element方法。这个方法也比较智能，当它判断jQuery可用时，会使用jQuery来初始化元素。否则会使用angular中自带的jqLite进行元素的初始化。