DOM的冒泡机制

最新推荐文章于 2023-05-04 20:58:57 发布

多看书少吃饭

最新推荐文章于 2023-05-04 20:58:57 发布

阅读量661

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_56818823/article/details/122972512

版权

ps:首先我要声明,我写博客是为了养成一个每日写博客的习惯,也是为了督促自己不断地学习,前端的道路很漫长,但是我将不断深入学习,争取越来越优秀,如果你是前端大佬,也欢迎来指点,我将虚心接受!

关于DOM的冒泡机制,这是浏览器自带的,子元素触发事件时, 会通知所有的祖先元素,事件参数: e.target 存储了事件最初触发的元素,如果想要阻止冒泡.,就需要添加事件方法:

e.stopPropagation

例如

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>冒泡机制</title>
    <style>
      #red {
        width: 500px;
        height: 500px;
        background-color: red;
      }
      #yellow {
        width: 300px;
        height: 300px;
        background-color: yellow;
      }
      #blue {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="red">
      <div id="yellow">
        <div id="blue"></div>
      </div>
    </div>
    <script>
      red.onclick = function (e) {
        console.log("单击了红色区域")
      }
      yellow.onclick = function (e) {
        console.log("单击了黄色区域")
        e.stopPropagation()
      }
      blue.onclick = function (e) {
        console.log("单击了蓝色区域")
      }
    </script>
  </body>
</html>

当我点击蓝色区域的时候,祖先元素也会被通知,给黄色元素添加e.stopPropagation()事件以后,就不会触发通知祖先元素了,这就是e.stopPropagation()的作用

接下来我们就需要利用冒泡机制来解决一下开发的问题了

比如百度的分页条,我们就可以利用这个机制来进行完成,也是非常便捷的

鼠标移动到谁,样式就给到了谁,非常基础简单

    <script>
            //第一步先找到id=pages的元素,添加委托事件
            //如果监听到初始事件元素是li就绑定样式
            //删除之前的样式,增加样式
            pages.onmouseover = function(e){
                if(e.target.tagName=='LI'){
                   document.querySelector(" #container>ul>.cur").classList.remove('cur')
                   e.target.classList.add('cur')
                }
            }
        </script>

效果图