Vue3事件处理，事件捕获顺序

用v-on(简写@)监听DOM事件，触发事件时候执行javaScript

当绑定的是无参函数时候括号可以省略（两种效果等同）。

当绑定的是有参函数中的对应的函数必须有形参与之相对应。

#下列代码执行结果为向页面输出Helloworld。

同时绑定多个函数

#此时点击一次按钮，绑定的两个事件都运行。

把事件event作为参数传入，可以在javaScript *** 作DOM树

常用的几个方法

e.target	是你当前点击的元素
e.currentTarget	是你绑定事件的元素
e.currentTarget.previousElementSibling.innerHTML	获得点击元素的前一个元素
e.currentTarget.firstElementChild	获得点击元素的第一个子元素
e.currentTarget.nextElementSibling	获得点击元素的下一个元素
e.currentTarget.getElementById("string")	获得点击元素中id为string的元素
e.currentTarget.getAttributeNode('string')	获得点击元素的string属性
e.currentTarget.parentElement	获得点击元素的父级元素
e.currentTarget.previousElementSibling.firstElementChild.innerHTML	获得点击元素的前一个元素的第一个子元素的HTML值

 事件修饰符

...



...

事件的冒泡与捕获

 

 

首先是进入捕获阶段（1->2->3->4），直到达到目标元素，在进入冒泡阶段(5->6->7->8)。如果此时给div，span，p分别绑定一个时间（默认事件是冒泡触发）.

执行上述代码

如果点击最外层（点击7），仅仅执行最外层。

如果点击中间层（点击6），中间层，最外层都会被执行。

如果点击最内层（点击5），追内层，中间层，最外层都会被执行。

当给中间层的事件绑定为捕获阶段获取

如果点击最外层（点击6），仅仅执行最外层。

如果点击中间层（点击3）[注意因为给中间层绑定了capture修饰符，该事件在捕获阶段处理]，

执行顺序为，（3）中间层内点击，（7）最外层被点击。

原因如下：

####首先是进入捕获阶段（1->2->3），已经达到目标元素，在进入冒泡阶段(6->7->8)。就不会再进入最内层。

如果点击最内层（点击4），追内层，中间层，最外层都会被执行。