获取,偏移量,鼠标 键盘 浏览器

获取元素偏移量

<div class="box1">
    <div class="box2"></div>
</div>

<script>
    /**
     *  获取元素偏移量
    */

    // 0. 获取元素
    var box2 = document.querySelector('.box2')

    // 1. 获取元素相对父级      元素.offsetParent
    console.log(box2.offsetParent)


    // 2. 获取元素的偏移量
    console.log('box2.offsetLeft', box2.offsetLeft)
    console.log('box2.offsetTop', box2.offsetTop)
</script>

获取元素尺寸与浏览器窗口尺寸

   <style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 4000px;
        height: 5000px;
        background-color: pink;
        /* padding: 50px; */
        /* border: 10px solid black; */
        /* margin: 50px; */
    }
</style>

<script>
    var oDiv = document.querySelector('div')
    // 获取元素尺寸(占地面积)

    // 1. offsetXXX         ---> 实际宽度 + padding + border
    // console.log('oDiv.offsetWidth', oDiv.offsetWidth)
    // console.log('oDiv.offsetHeight', oDiv.offsetHeight)

    // console.log('======================')

    // 2. clientXXX         ---> 实际宽度 + padding
    // console.log('oDiv.clientWidth', oDiv.clientWidth)
    // console.log('oDiv.clientHeight', oDiv.clientHeight)

    // 获取浏览器窗口尺寸

    // 1. window.innerXXX   ---> 计算时 会包含浏览器的滚动条
    console.log('window.innerWidth', window.innerWidth)
    console.log('window.innerHeight', window.innerHeight)

    // 2. document.documentElement.clientXXX    ---> 计算时 不会计算滚动条(只计算浏览器的可视区域)
    console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
    console.log('document.documentElement.clientWidth', document.documentElement.clientHeight)

</script>

鼠标事件

        <style>
    * {
        padding: 0;
        margin: 0;
    }
    div {
        width: 400px;
        height: 400px;
        background-color: pink;
    }
    .sBox {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

<script>
    // JS 的鼠标事件

    var oDiv = document.querySelector('div')

    // 1. 左键单击
    oDiv.onclick = function () {
        console.log('单击元素时触发')
    }

    // 2. 双击事件      300ms 内连续点击两次鼠标
    oDiv.ondblclick = function () {
        console.log('双击元素时触发')
    }

    // 3. 右键事件      鼠标右键单击
    oDiv.oncontextmenu = function () {
        console.log('鼠标右键单击时触发')
    }

    // 4. 鼠标按下事件      鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)
    oDiv.onmousedown = function () {
        console.log('鼠标按下时触发')
    }

    // 5. 鼠标抬起事件      鼠标左键抬起的时候会触发的
    oDiv.onmouseup = function () {
        console.log('鼠标抬起时触发')
    }

    // 6. 鼠标移入事件      鼠标的移动到元素内部时触发
    oDiv.onmouseover = function () {
        console.log('onmouseover 鼠标移入时触发')
    }

    // 7. 鼠标移出事件      鼠标移动出元素内部时触发
    oDiv.onmouseout = function () {
        console.log('onmouseout 鼠标移出时触发')
    }

    // 8. 鼠标移动事件          鼠标在元素内部移动时触发
    oDiv.onmousemove = function () {
        // console.log('鼠标移动时触发')
    }

    // 9. 鼠标移入事件2
    oDiv.onmouseenter = function () {
        console.log('onmouseenter 鼠标移入事件2')
    }

    // 10. 鼠标移出事件2
    oDiv.onmouseleave = function () {
        console.log('onmouseleave 鼠标移出事件2')
    }

    // onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发
    // onmouseenter onmouseleave 两个方法 只会在移入元素时触发


</script>

键盘事件

           <input type="text">
<script>
    /**
     *  键盘事件:
     *      document  或者 input
     * 
     *      document.on键盘事件的事件类型 = function () {}
    */

    // 1. 键盘抬起事件
    document.onkeyup = function () {
        console.log('键盘按键抬起')
    }

    // 2. 键盘按下事件
    document.onkeydown = function () {
        console.log('键盘某个按键被按下')
    }

    // 3. 键盘按下抬起事件
    document.onkeypress = function () {
        console.log('键盘按下抬起时触发')
    }
</script>

表单事件

         文本框: <input type="text" id="inp">
<script>
    // 表单事件
    var inp = document.querySelector('#inp')


    // 1. 获得焦点事件
    inp.onfocus = function () {
        console.log('当前文本框获得焦点')
    }

    // 2. 失去焦点事件
    inp.onblur = function () {
        console.log('当前文本框失去焦点')
    }

    // 3. 文本框内容改变时触发
    inp.onchange = function () {
        console.log('当前文本框内容被更改')
    }

    // 4. 文本框输入内容时触发
    inp.oninput = function () {
        console.log('当前文本框正在输入内容')
    }

</script>

事件 对象

          <style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
</head>

<body>
    <div></div>
    <script>
        /**
         * 事件对象
         * 
         *      当事件触发时, 携带一些信息
         * 
         *      当前时间的事件源是谁?
         *      鼠标点击的位置在哪里(点击事件)
         *      键盘按下了那个按键(键盘事件)
        */
        var oDiv = document.querySelector('div')

        oDiv.onclick = function (e) {
            console.log(e)
        }
    </script>
    
    

获取鼠标位置

       <style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        height: 5000px;
    }

    div {
        width: 500px;
        height: 500px;
        background-color: pink;
        position: fixed;
        top: 300px;
    }
</style>

获取键盘按键

        <body>
<input type="text" id="inp">
<script>

    /**
     *  键盘按键
     * 
     *      e.key ===> 返回按下的按键
     *      e.keyCode ===> 返回按下的按键的进制码
     *          keyCode 已经被移除, 但是很多主流浏览器还支持使用
    */

    var inp = document.querySelector('#inp')
    inp.onkeyup = function (e) {
        console.log(e)
        if (e.ctrlKey && e.key == 'a') {
            console.log('此时按下了 ctrl健 和 a键')
        }
    }
</script>