事件(1) 2让5345345

---

typora-root-url: img

获取元素宽高

<div style="width: 100px; height: 100px; border: 8px solid red; padding: 5px;"></div>
    <script>
        // 1、常规做法
        var divDom = document.querySelector('div');
        // 获取到的只是内容本身的宽度 并且还是携带px单位
        console.log(window.getComputedStyle(divDom).width);
        // 2、取出内容本身的宽度+padding的尺寸 返回的是数字 没有px单位clientWidth/clientHeight是只读属性 不能修改
        console.log(divDom.clientWidth);
        console.log(divDom.clientHeight);
        // divDom.clientWidth = 200
        // 获取页面的存储
        console.log(document.documentElement.clientWidth)
        // 3、offsetWidth/offsetHeight 获取到的是内容+padding+border 的存储 一样也是返回的是数字 也是只读属性
        console.log(divDom.offsetWidth);
    </script>

获取定位偏移量

<style>
    .one {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }

    .two {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top:100px;
    }
</style>
<div class="one">
    <div class="two"></div>
</div>
<script>
    // 1、获取上级定位元素 每一个元素绝对有一个上级定位元素，如果到boby都还没有定位元素最终以body计算
    console.log(document.querySelector('.two').offsetParent);
    // 2、获取相对于上级定位元素的距离
    // dom属性中 名称有top/left 表示的是距离 名称中有width/height 表示的是尺寸 名称中有xy的表示坐标点  offsetLeft/offsetTop 得到的也是数字 
    console.log(document.querySelector('.two').offsetLeft)
    console.log(document.querySelector('.two').offsetTop)
</script>

获取滚动宽高

1、使用示例

<style>
        .one {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            overflow: scroll;
        }

        .two {
            width: 600px;
            height: 600px;
            background-color: yellow;

        }
    </style>
    <div class="one">
        <div class="two"></div>
    </div>
    <button>获取</button>
    <script>
        document.querySelector('button').onclick = function(){
            var oneDom = document.querySelector('.one')
            // 获取到完整的尺寸
            console.log(oneDom.scrollHeight)
            // 获取到滚动距离
            console.log(oneDom.scrollTop);
            // 获取到内容存储
            console.log(oneDom.clientHeight)
            // 当滚动到底 完整的存储 = 滚动距离+内容尺寸
            // 你们注意 可能条件不满足 有可能会偏差1px以内
        }
    </script>

2、许可协议案例

<div id="big">
        <div id="small">
            欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        </div>
    </div>
    <input type="checkbox" id="agreement" disabled>
    同意协议
    <input type="button" id="go" value="去注册" disabled>
    <script>
        var bigDom = document.querySelector('#big');
        // 获取到完整尺寸
        var height = bigDom.scrollHeight;
        // 获取到内容尺寸
        var contentHeight = bigDom.clientHeight;
        bigDom.onscroll = function () {
            if(height == contentHeight + bigDom.scrollTop){
                // 说明已经到底了
                document.querySelector('#agreement').disabled = false
            }
        }
        document.querySelector('#agreement').onclick = function(){
            // 勾选了checked属性为真 按钮可以点击 disabled属性需要为false  取消了checked属性为false 按钮不能点击 disabled 属性需要为true
            document.querySelector('#go').disabled = !this.checked
        }
    </script>

事件对象

获取事件对象

事件对象用于记录事件触发的环境信息，例如现在将键盘按下，一旦事件触发，在事件处理程序中只知道事件被触发了但是不能知道具体是哪一个按键被按下导致事件触发。事件对象是行为触发之后系统自动给我们的，如果需要使用就拿出来用

<button>这是一个大按钮</button>
<script>
    // 点击事件对应的函数 e是形参 表示事件对象 名称任意
    // 为什么形参可以表示事件对象 因为调用函数不是我们在调用 系统在点击事件触发后 调用该函数时就传递了事件对象参数
    document.querySelector('button').onclick = function (e) {
        console.log('事件被点击了')
        // 1、IE使用的方式
        // console.log(window.event)
        // 2、w3c  只需要写第一个形参就可以表示事件对象
        // console.log(e)
        // 3、兼容性写法  创建的event变量与全局的window.event变量不冲突
        var event = e || window.event;
    }
</script>

按键码

1、单个按键码获取

document.onkeydown = function (e) {
        // 获取到事件对象
        var event = e || window.event;
        console.log(event)
        console.log(`按下的按键是${event.key} ASCII码值为${event.keyCode}`)
    }

2、组合按键

页面上可以使用的组合键 是使用ctrl 、alt、shift三个按键作为组合键。一旦使用三个组合按键中的一个将事件对

象中的ctrlKey 、altKey、shiftKey中的一个设置为true

document.onkeydown = function (e) {
        // 获取到事件对象
        var event = e || window.event;
        // console.log(event)
        // console.log(`按下的按键是${event.key} ASCII码值为${event.keyCode}`)
        // 判断是否使用组合按键 ctrl+c
        if(event.ctrlKey && event.key == 'c'){
            console.log('游戏结束')
        }
    }

打字游戏

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        span {
            width: 40px;
            height: 40px;
            background-color: red;
            color: white;
            border-radius: 50%;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 24px;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>

<body>
    <p>得分：<b>0</b></p>
    <script src="common.js"></script>
    <script>
        /*
            实现思路：
                1、控制一个元素向下掉落
                    1、创建span标签 加入到页面上
                    2、随机生成字符作为span标签的内容 使用字符串保存可用的字符 在通过随机下标得到对应的字符
                    3、设置元素left的样式 也需要随机(不能越界)
                    4、设置定时器反复修改元素的top值 一旦达到底部了 将元素销毁  整个步骤1再来一次
                2、处理键盘按下 如果输入的内容与产生的内容相同 销毁 后再来一次
        */
        // 保存定时器标识   
        var timer;
        // 全局变量保存生成的字符
        var char;
        // 保存span标签的dom对象
        var spanDom;
        // 创建span标签并且向下掉落的函数
        function createSpan() {
            // 1、创建span标签
            spanDom = document.createElement('span');
            // 2、设置标签的内容
            char = makeChar()
            spanDom.innerHTML = char;
            // 3、将标签加入到页面
            document.body.appendChild(spanDom);
            // 4、计算left的最大值 使用可视区宽度 - span 标签的宽度
            var maxWidth = document.documentElement.clientWidth - parseInt(getStyle(spanDom, 'width'));
            var left = makeRandom(0, maxWidth);
            // 5、设置left值
            spanDom.style.left = left + 'px';
            // 6、设置定时器
            timer = setInterval(function () {
                // 获取当前的top值
                var top = parseInt(getStyle(spanDom, 'top'));
                // 计算最大的top值
                var maxTop = document.documentElement.clientHeight - parseInt(getStyle(spanDom, 'height'));
                if (top >= maxTop) {
                    clearInterval(timer);
                    // 移除span标签
                    document.body.removeChild(spanDom);
                    createSpan()
                } else {
                    spanDom.style.top = top + 5 + 'px'
                }
            }, 30)
        }
        // 生成随机字符
        function makeChar() {
            // 表示可以使用的字符有那些
            var str = "qwertyuipasdfghjkl123456789";
            // 计算随机下标
            var index = makeRandom(0, str.length, false);
            return str[index];
        }
        createSpan();
        // 键盘按下事件
        document.onkeypress = function (event) {
            if (event.key == char) {
                clearInterval(timer);
                // 移除span标签
                document.body.removeChild(spanDom);
                createSpan()
                document.querySelector('b').innerHTML = document.querySelector('b').innerHTML - 0 + 1;
            }
        }
    </script>

</body>

</html>

鼠标坐标点

1、三组坐标点使用

<!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>
        *{padding: 0; margin: 0;}
        .one{ width: 100px; height: 100px; background-color: skyblue;}
        .two{width: 100px; height: 300px; background-color: pink;}
        .three{ width: 100px; height: 400px; background-color: rebeccapurple;}
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <script>
        document.querySelector('.one').onclick = function(event){
            // clientX/clientY 以页面的左上角为坐标圆点
            console.log(event.clientX,event.clientY)
        }
        document.querySelector('.two').onclick = function(event){
            // offsetX/offsetY 以当前元素的左上角为坐标圆点
            console.log(event.offsetX,event.offsetY);
        }
        document.querySelector('.three').onclick = function(event){
            // pageX/pageY 以文档的左上角为坐标圆点
            console.log(event.pageX,event.pageY)
        }
    </script>
</body>
</html>

2、坐标点案例

<p class="x">鼠标坐标点x：<strong>0</strong></p>
    <p class="y">鼠标坐标点y：<strong>0</strong></p>
    <script>
        document.onmousemove = function(event){
            document.querySelector('.x>strong').innerHTML = event.clientX;
            document.querySelector('.y>strong').innerHTML = event.clientY;
        }
    </script>

拖拽效果

<!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 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 0
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 拖拽效果 鼠标按下 在移动的过程中 改变元素的位置，一旦鼠标松手 再次移动就无效
        var divDom = document.querySelector('div');
        // 绑定鼠标按下事件
        divDom.onmousedown = function () {
            // 鼠标的移动事件一定要嵌套在按下事件中
            divDom.onmousemove = function (event) {
                // 实现元素跟随
                console.log(event)
                // 设置元素的移动
                this.style.top = event.clientY - 50 + 'px';
                this.style.left = event.clientX - 50 + 'px';
            }
        }
        divDom.onmouseup = function () {
            // 动态绑定的事件解绑 动态绑定的本质就是给dom对象的指定属性赋值，一旦行为触发 系统会自动调用函数，如果事件对应的属性为null 也就没有函数可以调用
            divDom.onmousemove = null;
        }
    </script>
</body>

</html>