解构赋值---函数参数的定义、获取事件源【2021.11.25】

最新推荐文章于 2022-01-26 14:01:33 发布

轻盈的风

最新推荐文章于 2022-01-26 14:01:33 发布

阅读量420

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/masierty/article/details/121535909

版权

解构赋值：按照一定模式从数组或对象中提取值对变量进行赋值，称之为结构。

知道了定义，我们来看看下面三种对解构赋值的应用

<!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>
        div{
           
            border: 1px black solid;
        }
        #div1{
            background-color: rgb(238, 144, 144);
            width: 25vw;
            height: 20vw;
        }
        #div2{
            background-color: rgb(245, 230, 164);
            width: 20vw;
            height: 15vw;
        }
        #div3{
            background-color: rgb(144, 232, 238);
            width: 10vw;
            height: 5vw;
        }
    </style>
</head>
<body>
    <div id="div1">
        这是div1
        <div id="div2">
            这是div2
            <div id="div3">这是div3</div>
        </div>
    </div>
    <script>
       //获取事件源
       let father = document.getElementById('div1');
       father.addEventListener("click",e=>{
           let {target}=e;
           target.style.backgroundColor="red";
       })
        

        //获取对象属性值
        let {pp} = {
            pp:123,
            oo:456,
        }
        console.log(pp);//123

         //获取事件触发位置的x坐标

         window.onmousemove=function({x}){
             console.log(x);
         }
    </script>
</body>

</html>

第一种获取事件源，我们都知道无论是监听绑定的事件还是传统事件绑定(.事件名),他们的处理函数中的第一个参数为 事件对象。这个对象包含了与这个事件相关的详细信息，如事件源，事件触发时点击的位置等等。这时候我们就可以通过e.target或者用解构赋值let {target}=e来获取事件源。

第二种就是利用解构赋值获取对象里的属性值。

利用第一种和第二种的方法我们可以获取事件触发位置的x坐标：

dom.οnmοusemοve=function({x}){

console.log(x);

}

原理就是利用解构赋值对函数的参数进行定义，而x正好对应事件对象中的事件触发时x轴的坐标。同理换成{y}获取的就是y轴的坐标。

这就是解构赋值一部分的妙用了，欢迎补充！

轻盈的风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解构赋值---函数参数的定义、获取事件源【2021.11.25】

解构赋值：按照一定模式从数组或对象中提取值对变量进行赋值，称之为结构。知道了定义，我们来看看下面三种对解构赋值的应用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
复制链接

扫一扫