[AngularJS面面观] 10. scope事件机制 - $emit，$broadcast以及事件对象

原创

于 2016-07-10 22:50:25 发布 · 7.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#angular #angularjs #发布订阅模式 #事件系统

本文详细介绍了AngularJS中的事件机制，包括事件对象的组成，如name、targetScope等字段；事件如何在scope继承树中通过$emit向上和$broadcast向下传递，并分析了事件传播过程中的注意事项；最后讨论了如何阻止事件传播和默认行为。通过这些内容，读者将更深入理解AngularJS的事件系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇文章中，介绍了事件机制背后的订阅-发布模式以及angular事件的生命周期。

本文继续介绍和事件机制相关的几个重要组成部分：
1. 事件对象的组成
2. 事件与scope继承树-$emit以及$broadcast
3. 事件的停止传播以及阻止默认行为

事件对象的组成

在调用事件回调函数的时候，事件对象会被构建出来并传入到回调函数中去。那么这个事件对象包含了哪些字段呢？由于事件的触发入口只有下面将会介绍的$emit以及$broadcast，所以弄清楚在相应代码中事件对象是如何构建出来的就可以了：

// $emit
$emit: function(name, args) {
   
   
  var empty = [],
      namedListeners,
      scope = this,
      stopPropagation = false,
      event = {
        name: name,
        targetScope: scope,
        stopPropagation: function() {
   
   stopPropagation = true;},
        preventDefault: function() {
   
   
          event.defaultPrevented = true;
        },
        defaultPrevented: false
      },
      listenerArgs = concat([event], arguments, 1),
      i, length;

  // ...
}

// $broadcast
$broadcast: function(name, args) {
   
   
  var target = this,
      current = target,
      next = target,
      event = {
        name: name,
        targetScope: target,
        preventDefault: