js基础知识（三十二）--事件的冒泡及div跟随鼠标移动小练习

最新推荐文章于 2024-06-09 00:06:15 发布

任重道远。

最新推荐文章于 2024-06-09 00:06:15 发布

阅读量477

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47928499/article/details/126375231

版权

本文介绍了JavaScript中的事件冒泡概念，说明了冒泡现象与元素位置无关，主要与结构相关。同时，讲解了如何取消事件冒泡，通过设置事件对象的cancelBubble属性为true或使用stopPropagation()方法。此外，还提供了一个div元素跟随鼠标移动的实践练习。

摘要由CSDN通过智能技术生成

事件的冒泡
冒泡（bubble）：冒泡指的是事件的向上传导，当元素上的某个事件被触发时，其祖先元素上的相同事件也会同时被触发，冒泡的存在在大部分情况下都是有利的，有利于简化开发
冒泡的发生只和结构有关，和元素的位置无关
要取消事件的冒泡需要用到事件对象，只需将事件对象的cancelBubble属性设置为true，即可取消冒泡,也可以通过事件的对象stopPropagation()方法来停止冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
     
            width: 100px;
            height: 100px;
            background-color: tomato;
        }

        #s1 {
     
            background-color: turquoise;
        }
    <