@click.self

官网解释

测试Demo

三个Div

大中小

俄罗斯套娃

 

①绑定同一个事件名，未加.stop / .self

点击单个div 

输出被点击的Div

 

----点击最小的div

结果：   一直冒泡到最外层大div

-----点击中等的div

结果：  同上

------点击最外层大div

结果：同上

总结 ： 可以看出在事件冒泡的作用下，子元素的事件一直传递到父元素 

补充一下知识点：

事件流 

   当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点会收到该事件，这个传播的过程叫做DOM事件流

事件又分为 冒泡事件 捕获事件

冒泡事件

    微软提出  事件由子元素到父元素的过程 称之为冒泡 金鱼吐泡泡

捕获事件

    网景提出 事件由父元素到子元素的过程 称之为捕获  鹰抓老鼠

当两者同时出现时  先捕获 后冒泡 

 

那么 如何阻止事件冒泡呢

   利用事件对象的属性：stopPropagation 和 cancelBubble

    stopPropagation是一个方法 ： e.stopPropagation();

    cancelBubble的值是一个常量： e.cancelBubble = true

vue 项目中 我们则可以通过 .stop /.self 来进行阻止事件冒泡

   

同样同上操作 

观看控制台

3次点击 依次输出 当前点击的div

 

整理一下 事件相关的那些事儿吧

查看W3C手册

JavaScript 事件参考手册

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

 前面进行的都是一个事件绑定 给div添加click点击事件  属于在Dom元素中直接进行绑定  这种操作称之为事件绑定 常见的还有在js中绑定和绑定事件监听函数

 事件除此操作

 亦有 事件监听 事件委托 

 事件监听：为同一个对象的同一个事件绑定多个事件处理程序 

 事件委托： 利用冒泡的原理 把事件加到父级上，触发执行效果

     它的好处在于

         a.实现对未来事件的绑定 未来元素即页面上尚不存在的元素

         b.减少事件绑定，提高性能

  那么如何进行事件监听 以及 解绑事件监听呢

 进行

   addEventListener()  

       参数1：事件类型  不需要加on

       参数2：回调函数

       参数3：布尔值 true代表捕获 false 代表冒泡

在万......e.....能！的IE浏览器下

 

attachEvent()

 解绑

   removeEventListener()---------detachEvent()

 

转载于:https://www.cnblogs.com/522040-m/p/9856795.html