JavaScript的第16天

最新推荐文章于 2024-06-20 20:20:21 发布

竹叶依旧

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量235

点赞数

分类专栏： JavaScript基础文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/qq_46426476/article/details/122483645

版权

JavaScript基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

事件对象

<!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>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }
        #box2{
            margin-top: 10px;
            width: 300px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload=function(){
            /* 
                onmousemove
                    ---该事件将会在鼠标在元素中移动时被触发

                事件对象
                    ---当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
                        在事件对象中封装了当前事件相关的一切信息，比如: 鼠标的坐标 键盘哪个按键按下 。。。

                clientX---可以获取鼠标指针的水平坐标
                clientY---可以获取鼠标指针的垂直坐标
            */
            // 获取两个div对象
            var box1=document.getElementById("box1");
            var box2=document.getElementById("box2");
            console.log(box1);
            // 添加移动事件
            box1.onmousemove=function(event){
                // 除ie8以下其他浏览器兼容
                // box2.innerHTML="x"+event.clientX+",y"+event.clientY;
                // 判断当前浏览器是否有event事件(兼容ie8以下)
                event=event||window.event;
                box2.innerHTML="x"+event.clientX+",y"+event.clientY;
            }

        }
    </script>
</head>
<body>
    <div id="box1">

    </div>
    <div id="box2">

    </div>
</body>
</html>

事件对象的练习

<!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>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: yellowgreen;
        }
        #box2{
            width: 200px;
            height: 500px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
            /* 
                pageX和pageY可以获取鼠标相对于当前页面的坐标
                    但是这个两个属性在IE8中不支持，所有如果需要兼容IE8，则不要使用
            */
            var box1=document.getElementById("box1");

            document.onmousemove=function(event){
                // 解决兼容性问题
                event=event||window.event;
                // 1所有浏览器不兼容
                // box1.style.left=event.pageX+"px";
                // box1.style.top=event.pageY+"px";

                // 2所有浏览器兼容  (document.documentElement获取页面的html元素)
                box1.style.left=event.clientX+document.documentElement.scrollLeft+"px";
                box1.style.top=event.clientY+document.documentElement.scrollTop+"px";
            }

            // 取消box2的冒泡
            // var box2=document.getElementById("box2");
            // box2.οnmοusemοve=function(event){
            //     event.cancelBubble=true;
            // }

        };

    </script>
</head>
<body>
    <div id="container" style="height: 1000px;width: 2000px;">
        <div id="box2">

        </div>
        <div id="box1" >

        </div>

    </div>
</body>
</html>

事件的冒泡

<!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>Document</title>
    <style>
        #box1{
            width: 500px;
            height: 500px;
            background-color: red;
        }
        #box2{
            width: 300px;
            height: 300px;
            background-color: greenyellow;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script>
        window.onload=function(){
            /* 
                事件的冒泡(Bubble)
                    ---所谓的冒泡指的就是事件的向上传导，
                    当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

                    ---在开发中大部分情况冒泡都是有用的，
                    如果不希望发送事件冒泡可以通过事件对象来取消冒泡

                event.cancelBubble---属性
                    ---true  取消冒泡
                    ---false  冒泡
            */
           var box3=document.getElementById("box3");
           box3.onclick=function(event){
               //  event的兼容性
               event?event:window.event;
               
            //    取消box3的冒泡
               event.cancelBubble=true;
               alert("box3的点击");
           }
           var box2=document.getElementById("box2");
           box2.onclick=function(){
               alert("box2的点击");
           }
           var box1=document.getElementById("box1");
           box1.onclick=function(){
               alert("box1的点击");
           }
        }

    </script>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p>这是一个box3中的标签</p>
            </div>
        </div>
        
    </div>
</body>
</html>

事件的委派

<!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>Document</title>
    <script>
        window.onload=function(){
            /* 
                我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，
                我们可以尝试将其绑定给元素的共同的祖先元素

                事件的委派
                    ---指向事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件被触发时，
                    会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

                    ---事件委派利用了冒泡，通过委派可以减少事件绑定的次数，通过程序的性能


                target---属性
                    --event中的target表示当前触发事件的对象
            */
            var btn=document.getElementById("btn");
            var ul=document.getElementById("ul");
            btn.onclick=function(event){
                event?event:window.event;

                var li=document.createElement("li");
                li.innerHTML="<a href='javascript:;' class='a'>新建事件</a>";
                ul.appendChild(li);
                
            }
            // 利用事件的委派间接给对应的a元素绑定事件
            var as=document.getElementsByTagName("a");
            ul.onclick=function(event){
                event?event:window.event;
                // 判断当前点击的事件如果有class=a，输出
                if (event.target.className=="a") {
                    alert("这是一个taget点击事件");
                }
            }
        }
    </script>
</head>
<body>
    <button id="btn">添加li</button>
    <ul id="ul">
        <li>
            <p>这是一个ul里面的li</p>
        </li>
        <li><a href="javascript:;" class="a">事件1</a></li>
        <li><a href="javascript:;" class="a">事件2</a></li>
    </ul>
</body>
</html>

竹叶依旧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的第16天

事件对象<!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&g
复制链接

扫一扫