投稿
  1. .Net中文网首页
  2. JavaScript

WebAPI-scroll、client家族、事件

.Net中文网 • • JavaScript • 阅读 2300

文章目录

获得元素样式属性

window.getComputedStyle

<!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: 200px;
            height: 200px;
            border: 10px solid blue;
            background-color: red;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        let box = document.getElementById('box');
        // 获得元素样式
        // 获得元素样式属性：window.getComputer
        console.log(window.getComputedStyle(box).width);//200px
        console.log(window.getComputedStyle(box)['width']);//200px
        console.log(window.getComputedStyle(box).height);//200px
        console.log(window.getComputedStyle(box).border);//10px solid rgb(0, 0, 255)
        console.log(window.getComputedStyle(box).backgroundColor);//rgb(255, 0, 0)
        // 封装获得元素样式属性的函数
        function getStyle(elm, attr) {
            return window.getComputedStyle(elm)[attr];
        }

        console.log(getStyle(box, 'padding'));
    </script>
</body>

</html>

scroll家族属性

  • scrollWidth:内容的宽（content+padding+scrollLeft的最大值）
  • scrollHeight:内容的高（content+padding+scrollTop的最大值）
  • scrollTop:垂直滚动距离(并不是页面滚动的距离)
  • scrollLeft:水平滚动距离(并不是页面滚动的距离)
  • 获得页面的滚动距离(利用||短路运算)
function getScroll() {
    // 页面滚动有两个方向,应该需要返回两个值
    // 准备多个方法,让浏览器各取所需即可
    return {
        scrollTop: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop || 0,
        scrollLeft: document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft || 0
    }
}

client家族属性

  • clientWidth:内容区域宽度（宽+padding）
  • clientHeight:内容区域的高度（高+padding）
  • clientTop:上边框的宽度
  • clientLeft:左边框的宽度
  • 获得页面的内容区域：
<script>
    // 1. 通过body来获取内容区域
    // console.log(document.body.clientWidth);

    // 2. 通过html获得内容区域
    // console.log(document.documentElement.clientWidth);
    // 3. window
    // console.log(window.innerWidth);
    // 兼容
    function getClient() {
        return {
            clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        }
    }
    console.log(getClient());
</script>

事件

关于事件实际上我们已经初步接触过了，指的就是用户与浏览器交互的一瞬间。

我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件触发以后我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。

事件对象

事件对象: 不管是哪个事件被触发,都会产生事件对象,里面保存了一些与事件触发相关的信息

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
        let box = document.getElementById('box');
        // 设置点击事件
        // 如何获得事件对象
        box.onclick = function (e) {
            // 简单兼容: ew
            e = window.event || e;
            console.log(e);
        }
        box.onmouseover = function (e) {
            e = window.event || e;
            console.log(e);
        }
        box.onmouseout = function (e) {
            e = window.event || e;
            console.log(e);
        }
    </script>
</body>

</html>

事件对象中的三个坐标

  • clientX :鼠标相对于浏览器（这里指浏览器的有效区域）左上角的x轴坐标；不随滚动条的滚动而改变
  • clientY :鼠标相对于浏览器（这里指浏览器的有效区域）左上角的y轴坐标；不随滚动条的滚动而改变
  • pageX :鼠标相对于浏览器 （这里指浏览器的有效区域）左上角的x轴坐标；随滚动条的滚动而改变
  • pageY :鼠标相对于浏览器（这里指浏览器的有效区域）左上角的y轴坐标；随滚动条的滚动而改变
  • screenX: 鼠标相对于显示器屏幕左上角x轴的坐标
  • screenY:鼠标相对于显示器左上角y轴的坐标
< !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>
      * {
        margin: 0;
        padding: 0;
      }

      #box {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>

  <body>
    <div id="box"></div>
  </body>

  <script>
    let box = document.getElementById("box");

    // 鼠标按住事件/按下事件
    // onmousedown
    box.onmousedown = function (e) {
      e = window.event || e;

      // 获得鼠标在盒子中的坐标
      let pointX = e.pageX - box.offsetLeft;
      let pointY = e.pageY - box.offsetTop;

      //给页面设置鼠标移动事件
      window.onmousemove = function (e) {
        e = window.event || e;

        // 计算盒子的位移坐标
        let boxX = e.pageX - pointX;
        let boxY = e.pageY - pointY;

        // 限制位移的最大值与最小值
        // 限制最小值:0
        boxX = boxX < 0 ? 0 : boxX;
        boxY = boxY < 0 ? 0 : boxY;

        // 限制最大值: 页面的宽高 - 盒子的宽高
        boxX =
          boxX > window.innerWidth - box.offsetWidth
            ? window.innerWidth - box.offsetWidth
            : boxX;
        boxY =
          boxY > window.innerHeight - box.offsetHeight
            ? window.innerHeight - box.offsetHeight
            : boxY;

        box.style.left = boxX + "px";
        box.style.top = boxY + "px";
      };
    };

    // 鼠标弹起事件
    box.onmouseup = function () {
      window.onmousemove = null;
    };
  </script>
</html>
WebAPI-scroll、client家族、事件

事件注册的方法

  1. 利用on关键字来注册事件（一个元素不能有多个点击事件）
box.onclick = function () {
    console.log('测试 ');
}
box.onclick = function () {
    console.log('文字');
}
//只打印后面这个
  1. 利用addEventListener()设置事件监听器注册事件
    这个方法需要两个参数：一个是事件字符串，一个是响应函数。
    ps:ie8以下的浏览器是不支持上边的方法的，需要使用attachEvent代替。
btn.addEventListener('click' , function(){alert("hello");});

移除事件的方法

  1. 利用on关键字，赋值为null清空事件
btn.onclick = function () {
    console.log('我被调用了');
    // 利用赋值null来清空点击事件
    btn.onclick = null;
}
  1. 使用removeEventListener()和detachEvent()移除事件。
function fun() {
    console.log('我也被调用了');
    // 点击之后，移除事件
    // remove
    btn.removeEventListener('click', fun, false);

}
btn.addEventListener('click', fun, false);

事件源

  1. 通过this,谁调用就指向谁
  2. e.target
<script>
    let liArr = document.getElementsByTagName('li');

    // 给每个li标签设置点击事件
        for(let i = 0;i < liArr.length; {
        liArr[i].onclick = function (e) {
            e = window.event || e;
            console.log('啊，我被点击了');
            // 点击的时候，到底谁触发了事件

            //this--->谁调就指向谁
            // console.log(this);
            // 事件源--->触发事件的源头
            console.log(e.target);
        }
    }
</script>

事件冒泡机制

如果一个元素的某个事件被触发，那么它所有的父级元素相同的事件也会被触发

事件冒泡，从内到外，从小到大

on关键字注册的事件，默认就是冒泡机制

addEventListener(事件字符串，响应函数，参数)
addEventListener(事件字符串，响应函数，false):冒泡阶段
addEventListener(事件字符串，响应函数，false):捕获阶段

Event对象的通用属性/方法

WebAPI-scroll、client家族、事件
原文出处：CSDN【Silent Land】

原文链接：https://blog.csdn.net/weixin_44757417/article/details/107699807

本文观点不代表 .Net中文网 立场，转载请联系原作者。
赞 (5)
.Net中文网.Net中文网管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年08月01日 15:21
下一篇 2020年08月01日 15:27

相关推荐

发表回复

登录后才能评论