WebAPI——scroll、client家族、事件

获得元素样式属性

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>
</html>
<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>

在这里插入图片描述

事件注册的方法

利用on关键字来注册事件（一个元素不能有多个点击事件）

 box.onclick = function () {
            console.log('测试 ');

        }
 box.onclick = function () {
            console.log('文字');
        }
        //只打印后面这个

利用addEventListener()设置事件监听器注册事件
这个方法需要两个参数：一个是事件字符串，一个是响应函数。
ps:ie8以下的浏览器是不支持上边的方法的，需要使用attachEvent代替。

btn.addEventListener('click' , function(){alert("hello");});

移除事件的方法

利用on关键字，赋值为null清空事件

	btn.onclick = function () {
	console.log('我被调用了');
	 // 利用赋值null来清空点击事件
	btn.onclick = null;

        }

使用removeEventListener()和detachEvent()移除事件。

	function fun() {
	console.log('我也被调用了');
	// 点击之后，移除事件
	 // remove
    btn.removeEventListener('click', fun, false);

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

事件源

通过this,谁调用就指向谁
e.target

<script>
        let liArr = document.getElementsByTagName('li');

        // 给每个li标签设置点击事件
        for(let i = 0;i < liArr.length;i++) {
            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家族、事件

获得元素样式属性

scroll家族属性

client家族属性

事件

事件对象

事件对象中的三个坐标

事件注册的方法

移除事件的方法

事件源

事件冒泡机制：

Event对象的通用属性/方法

猜你喜欢