事件冒泡

Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素来说是相同的 - (eventName)="expression" :

------- ----------------------------------

DOM ELEMENTS

DOM 元素触发的一些事件通过 DOM 层级结构传播。这种传播过程称为事件冒泡。事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素。DOM 事件冒泡与 Angular 可以无缝工作,具体示例如下:

------ - --------- - ---- ----------------

------------
  --------- ----------
  --------- -
    ---- --------------------
      ----------------------
    ------
  -
--
------ ----- ------------ -
  --------- -
    ---------------------
  -
-

以上代码成功运行后,当用户点击 Click 按钮,浏览器控制台将会输出:

-----

即表示 <div> 元素上设置的监听函数被执行,也间接证明了事件冒泡能正常工作。

Angular Component

Angular 允许开发者通过 @Output() 装饰器和 EventEmitter 自定义事件。它不同于 DOM 事件,因为它不支持事件冒泡。在介绍自定义事件前,我们先来看一下自定义组件如何监听 DOM 事件。

event-bubbling.component.ts

------ - --------- - ---- ----------------

------------
    --------- -----------------
    --------- -
    -----
      ----------------------
    ------
  -
--
------ ----- ---------------------- - -

app.component.ts

------ - --------- - ---- ----------------

------------
  --------- ----------
  --------- -
    -----
      --------------- ---------------------
    ------
  -
--
------ ----- ------------ -
  --------- -
    ---------------------
  -
-

以上代码成功运行后,当用户点击 Click 按钮,浏览器控制台也会输出 Click。表示我们的自定义组件,也是可以正常处理组件内元素触发的 click 事件。但当我们在自定义组件中创建自定义事件时,事件名称也是使用 click ,那么会不会有问题呢?我们马上来实践一下。

Custom Events

event-bubbling.component.ts

------ - ---------- ------- ------------ - ---- ----------------

------------
    --------- -----------------
    --------- -
    -----
      ------- ------------------------ ----------- ----------
      ------- ------------------------ ----------- ----------
    ------
  -
--
------ ----- ---------------------- -
    --------- ----- - --- ---------------

    --------------- ------- -
        ------------------------
    -
-

app.component.ts

------ - --------- - ---- ----------------

------------
  --------- ----------
  --------- -
    -----
      --------------- ---------------------------
    ------
  -
--
------ ----- ------------ -
  -------------- ---- -
    -------------------
  -
-

以上代码成功运行后,当用户点击 Button 1 按钮时,浏览器控制台将会输出:

------ - 
---------- ----------- ----- -------- --- -------- ---- -------- --- -------- ----

我们看到控制台输出了两个信息,说明在这种情况下,Angular 可以处理自定义事件和 DOM (click) 事件。当 click 事件触发后,onClick() 方法接收的 event 参数是 MouseEvent 对象。

那么要如何修复这个问题呢?我们可以利用 DOM 事件提供的防止冒泡的机制,即 stopPropagation() 方法。具体示例如下:

event-bubbling.component.ts

------ - ---------- ------- ------------ - ---- ----------------

------------
    --------- -----------------
    --------- -
    -----
      ------- ------------------------ ------- ----------- ----------
      ------- ------------------------ ------- ----------- ----------
    ------
  -
--
------ ----- ---------------------- -
    --------- ----- - --- ---------------

    -------------- ------ ------- ------- -
        ------------------------
        ------------------------
    -
-

以上代码成功运行后,当用户点击 Button 1 按钮时,只会输出 Button 1 ,即问题我们已经修复了。

现在我们来总结一下:

  • DOM 事件冒泡机制,允许在父元素监听由子元素触发的 DOM 事件
  • Angular 支持 DOM 事件冒泡机制,但不支持自定义事件的冒泡。
  • 自定义事件名称与 DOM 事件的名称如 (click,change,select,submit) 同名,可能会导致问题。虽然可以使用 stopPropagation() 方法解决问题,但实际工作中,不建议这样使用。

介绍完上面的内容,接下来我们来介绍一下在 Angular 中如何实现 Event Modifiers

Event Modifiers

在实际项目中,我们经常需要在事件处理器中调用 preventDefault()stopPropagation() 方法:

  • preventDefault() - 如果事件可取消,则取消该事件,意味着该事件的所有默认动作都不会发生。需要注意的是该方法不会阻止该事件的冒泡。
  • stopPropagation() - 阻止当前事件在 DOM 树上冒泡。

对于 preventDefault() 方法,有一个经典的应用场景。即当我们希望点击链接在新窗口打开页面,但不希望当前页面跳转。这个时候可以使用 preventDefault() 阻止后面将要执行的浏览器默认动作。

-- --------- ---------------------------------------------------------- --- --------
--------
    --------------------------------------- - ------------ -
        -------------------- -- --------- ------
        ----------------------- -- --------
    --
---------

一下子扯远了,赶紧回到正题。在 Angular 中阻止 DOM 事件冒泡,我们可以使用以下两种方式:

方式一

-----
  ------- ---------------------------------- -------------------- -----------
------

方式二

------------
  --------- ----------
  --------- -
    -----
        ------- ----------------------------------- -----------
    -------
--
------ ----- -------------- -
  ------------------- ------ -
    -------------------------
    -- ---- -----
  -
-

是不是感觉很麻烦,每次都得显式地调用 $event.stopPropagation() 方法。有没有更简便的方法呢?能不能使用声明式的语法?在 Vue 中可以通过声明式的方式,解决我们上面的问题。具体如下:

---- --- ----- ------- ----------- ---- -- ------- ---
-- --------------------------

---- --- ------ ----- ---- -- ------ ------ --- ---- ---
----- --------------------------------

---- --- ----- ----- ---- -- --------- -- ---- ---- ---
-- --------------------------

接下来我们也来基于 Angular 的指令系统,实现上述的功能。最终的使用示例如下:

---- -------------- -----------------------
  ------- ------------- -------------------------------- -----------
------

自定义 [click.stop] 指令

------ - ---------- ------- ------------- ---------- ---------- - ---- ----------------

------------
    --------- --------------
--
------ ----- ------------------------ -
    --------------------- ------------- - --- ---------------
    ------------ -- -- -----

    ------------
        ------- --------- ---------- -- ------- -------------
        ------- -------- ----------- -
    -

    ---------- -
        ---------------- - ---------------------
            --------------------------- -------- ----- -- -
                ------------------------
                -------------------------------
            ---
    -

    ------------- -
        -------------------
    -
-

[click.stop] 指令应用

------ - --------- - ---- ----------------

------------
  --------- ----------
  --------- -
    ---- -------------- -----------------------
      ------- ------------- -------------------------------- -----------
    ------
  -
--
------ ----- ------------ -
  ----------- -
    -------------- -- --------
  -

  ------------ -
    -------------- -- ---------
  -
-

以上代码成功运行后,当用户点击 Click me 按钮时,浏览器控制台只会输出 I am Child。若把 (click.stop) 改为 (click) ,当用户再次点击 Click me 按钮时,控制台就会输出两条信息。有兴趣的读者,可以亲自验证一下哈。

参考资源


上一篇:ViewEncapsulation简介
下一篇:LocationStrategy策略