DOM关于事件的相关问题

最新推荐文章于 2024-09-20 11:38:47 发布

one or two

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量95

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41633396/article/details/117910778

版权

本文详细介绍了事件冒泡的概念，通过一个HTML示例展示了当后代元素触发事件时，如何影响其祖先元素。同时，讨论了如何通过阻止事件冒泡来控制这一行为。此外，还提到了事件委托的概念，并通过一个问题分析了在实际编程中如何正确使用事件委托，以及在处理事件过程中遇到的问题，如元素动态添加与事件绑定的关联性。

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

为事件找对象

操作处理对象

其中，操作处理对象，包括但不限于修改样式，读取样式

事件的冒泡

在这里插入图片描述

上面给出了当后代元素为某事件绑定响应函数时，其祖先元素也有某个相同的事件时，而且祖先元素也绑定了响应的函数，那么会出现冒泡行为

其次，如果给一个父元素的某个事件绑定了响应函数，那么，浏览器默认在该父元素的子元素内也会发生该事件，并激发该行为，比如:下面这个例子

<!DOCTYPE html>
<html lang="zh">
    <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>div移动</title>
        <style>
            #box1{
                width:200px;
                height:200px;
                background-color:#bfa;
                position:absolute;
            }

            #box2{
                width:500px;
                height:500px;
                background-color:pink;
            }
        </style>
        <script>
            // 创建onload事件
            window.onload = function(){
                // 获取box对象
                var box1 = document.getElementById("box1");

                // 为文档对象绑定鼠标移动函数
                document.documentElement.onmousemove = function(event){

                    // 解决浏览器关于event的兼容性问题
                    event = event || window.event;
                    // 获取鼠标坐标
                    var left = event.clientX;
                    var top = event.clientY;
                    // console.log(left);

                    // 获取scrollTop,但是为body设置高度，产生滚轮式，在不同的浏览中，会认为滚轮长生的对象不同

                    var distanceX = document.documentElement.scrollLeft || document.body.scrollLeft;
                    var distanceY = document.documentElement.scrollTop || document.body.scrollTop;
                    console.log(distanceX);
                    console.log(distanceY);



                    // console.log(distanceY);

                    box1.style.left = left + distanceX + "px";
                    box1.style.top = top + distanceY + "px";
                }

                // 为box2创建像响应函数
                /* var box2 = document.getElementById("box2");
                box2.onmousemove = function(event){
                    event = event || window.event;
                    event.cancelBubble = true;
                } */
            }
        </script>
    </head>
    <body style="height:2000px">
        <div id="box2">
            <div id="box1"></div>
        </div>
    </body>
</html>

在这里插入图片描述

此时发现，box1此时也可以在box2里面动，因为，我为document.documentElement(HTML)对象绑定了一个鼠标移入事件

在这里插入图片描述

因此，即使没有为box2设置鼠标移入事件，但是box1仍然可以移入到box2中，这相当于"事件的冒泡"，但是这个根据上面的事件冒泡给出的定义可能不好理解，我们可以从侧面来证明是事件的冒泡的作用产生的，比如，我们为通过事件对象，来取消冒泡，具体加入以下代码

<!DOCTYPE html>
<html lang="zh">
    <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>div移动</title>
        <style>
            #box1{
                width:200px;
                height:200px;
                background-color:#bfa;
                position:absolute;
            }

            #box2{
                width:500px;
                height:500px;
                background-color:pink;
            }
        </style>
        <script>
            // 创建onload事件
            window.onload = function(){
                // 获取box对象
                var box1 = document.getElementById("box1");

                // 为文档对象绑定鼠标移动函数
                document.documentElement.onmousemove = function(event){

                    // 解决浏览器关于event的兼容性问题
                    event = event || window.event;
                    // 获取鼠标坐标
                    var left = event.clientX;
                    var top = event.clientY;
                    // console.log(left);

                    // 获取scrollTop,但是为body设置高度，产生滚轮式，在不同的浏览中，会认为滚轮长生的对象不同

                    var distanceX = document.documentElement.scrollLeft || document.body.scrollLeft;
                    var distanceY = document.documentElement.scrollTop || document.body.scrollTop;
                    console.log(distanceX);
                    console.log(distanceY);



                    // console.log(distanceY);

                    box1.style.left = left + distanceX + "px";
                    box1.style.top = top + distanceY + "px";
                }

                // 为box2创建像响应函数
                var box2 = document.getElementById("box2");
                box2.onmousemove = function(event){
                    event = event || window.event;
                    event.cancelBubble = true;
                }
            }
        </script>
    </head>
    <body style="height:2000px">
        <div id="box2">
            <div id="box1"></div>
        </div>
    </body>
</html>