事件冒泡的理解

366 阅读1分钟

前言

之前学习前端的时候,只知道有一个名字叫:事件冒泡(DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。)。事件冒泡顺序是由内到外进行事件传播,直到根节点。也就是说:触发在子元素上的事件,最终会也会冒泡到父元素的上进行触发。

addEventListener(event, listener, useCapture)  
·参数定义:event---(事件名称,如click,不带on),listener---事件监听函数,useCapture---是否采用事件捕获进行事件捕捉,默认为false,即采用事件冒泡方式
addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。

遇到的问题

image.png

问题描述: 当我点击打印的时候,不想要触发表格行的点击事件。

解决办法

打印的click添加一个 e.stopPropagation()既可以完美解决

handlePrint = (e) => {
    e.stopPropagation()
    alert(1,'1')
 }

原理要在实践中进行验证。