Vue.js笔记------事件

一、事件与事件流

   1、事件与事件流

    【事件】

      JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。常见的有加载事件、鼠标事件。

    【事件流】

      由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流。页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

    【js的事件流三阶段】

        事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

        处于目标阶段(target phrase):处于绑定事件的元素上;

        事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;(事件捕获是从上到下,而事件冒泡,是从下到上。)

2、事件冒泡与事件捕获

     事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。

     事件冒泡:

        微软提出了名为事件冒泡(event bubbling)的事件流。

        事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。

        也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

        因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→div→body→html→document.

        事件捕获:

        网景提出另一种事件流名为事件捕获(event capturing)。

        与事件冒泡相反,事件会从最外层