在前端开发中，我们经常需要处理点击事件，但有时候我们需要知道点击事件是直接触发的，还是通过冒泡触发的。本文将介绍如何判断一个点击事件是否由冒泡触发，并提供相应的示例代码。
什么是事件冒泡
事件冒泡是指当一个元素被点击时，该事件会从该元素开始向上层元素逐级传递，直到传递到根元素为止。例如，当我们点击一个按钮时，该点击事件将首先传递给该按钮，然后传递给包含该按钮的父元素，再一直传递到文档的根元素。这是因为当我们点击一个元素时，会触发该元素上的点击事件，然后该事件会继续向上传递。
如何判断事件是否由冒泡触发
在 JavaScript 中，可以使用 Event 对象的 target 属性和 currentTarget 属性来判断事件是否由冒泡触发。其中，target 属性表示事件的目标对象，即最初触发事件的元素，而 currentTarget 属性表示当前正在处理事件的元素，即事件正在冒泡到的元素。
如果 target 和 currentTarget 相同，则说明该事件是直接触发的，否则说明该事件是通过冒泡触发的。下面是一个示例代码：
-- -------------------- ---- -------
------
---- ------------
------- ---------------- -----------
------
--------
----- ------ - ----------------------------------
----- ----- - ---------------------------------
-------------------------------- ----- -- -
------------------- -------- -------------------------- ------------------------------------------
---
------------------------------- ----- -- -
------------------ -------- -------------------------- ------------------------------------------
---
---------
-------在上面的代码中，我们在父元素和子元素上都绑定了点击事件，并打印出事件的 target 和 currentTarget 属性。当我们点击按钮时，控制台将输出以下内容：
child clicked: target=child, currentTarget=child parent clicked: target=child, currentTarget=parent
可以看到，当我们直接点击按钮时，事件的 target 和 currentTarget 属性相同；而当我们点击父元素时，事件的 target 和 currentTarget 属性不同，说明该事件是通过冒泡触发的。
总结
在本文中，我们介绍了如何判断一个点击事件是否由冒泡触发，并提供了相应的示例代码。通过学习这些知识，我们可以更好地处理点击事件，并编写出更加稳健的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29992