js的常见事件总结

<!-- <script>

        // 事件：用户操作页面产生的行为叫做事件。

        // 事件处理函数：一旦触发事件，事件函数就会自动执行

    </script> -->

    <!-- <div id="btn">点击div</div>

    <script>

        // onclick  点击事件

        var btn= document.querySelector("#btn")

        btn.onclick = function (){

            console.log("点我干什么")

        }

    </script> -->

    <!-- 双击ondblclick -->

    <!-- <div id="btn">双击我试试</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.ondblclick = function (){

            console.log("点我干什么")

        }

    </script> -->

    <!-- 鼠标点击下去的时候 onmousedown -->

    <!-- <div id="btn">点下鼠标别放开你敢吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmousedown = function (){

            console.log("你真傻")

        }

    </script> -->

    <!-- 鼠标点击松开以后的时候 onmouseup -->

    <!-- <div id="btn">点下鼠标放开你敢吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmouseup = function (){

            console.log("又上当了吧")

        }

    </script> -->

    <!-- 鼠标进入某个元素的时候 onmouseenter -->

    <!-- <div id="btn">你敢碰我吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmouseenter = function (){

            console.log("狗东西")

        }

    </script> -->

    <!-- 鼠标离开某个元素的时候 onmouseleave -->

    <!-- <div id="btn">你敢离开我吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmouseleave = function (){

            console.log("你真听话")

        }

    </script> -->

    <!-- 鼠标在某个元素上移动的时候onmousemove -->

    <!-- <div id="btn">你敢在我上面移动吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmousemove = function (){

            console.log("试试你的胆子")

        }

    </script> -->

    <!-- 不常用的两个事件onmouseover:移到元素上的时候   onmouseout 移出元素的时候

        与onmouseenter、onmouseleave效果一样。我们一般都用onmouseenter、onmouseleave    

    -->

    <!-- <div id="btn">你敢碰我吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmouseover = function (){

            console.log("狗东西")

        }

    </script> -->

    <!-- <div id="btn">你敢离开我吗</div>

    <script>

        var btn= document.querySelector("#btn")

        btn.onmouseout = function (){

            console.log("你真听话")

        }

    </script> -->

<!-- onselect  当选中input框中的内容是触发的事件 -->

    <!-- <input type="text" name="" id="ipt" >

    <script>

        _ipt = document.querySelector("#ipt")

        _ipt.onselect = function (){

            console.log("选我干什么")

        }

    </script> -->

    <!-- onchange  当改变内容并且失去焦点的时候触发的事件 -->

    <!-- <input type="text" name="" id="ipt" >

    <script>

        _ipt = document.querySelector("#ipt")

        _ipt.onchange = function (){

            console.log("谁让你改变我的")

        }

    </script> -->

    <!-- oninput 当内容发生改变时 -->

    <!-- <input type="text" name="" id="ipt" >

    <script>

        _ipt = document.querySelector("#ipt")

        _ipt.oninput = function (){

            console.log("谁让你改变我的")

        }

    </script> -->

    <!-- onfocus  当页面火元素获取焦点的时候 -->

    <!-- <input type="text" name="" id="ipt" value="聚焦我有你好看的">

    <script>

        _ipt = document.querySelector("#ipt")

        _ipt.onfocus = function (){

            console.log("想得美")

        }

    </script> -->

    <!-- onblur  当页面或元素失去焦点的时候 -->

    <!-- <input type="text" name="" id="ipt" value="失焦你就完了">

    <script>

        _ipt = document.querySelector("#ipt")

        _ipt.onblur = function (){

            console.log("beng")

        }

    </script> -->

<!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0827%2Fc0c92bd51bb72e6d12d5b877dce338e8.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650438325&t=fbd244eff3c30f9f9c6fe531b1360299" alt="">

    <img src="https://img0.baidu.com/it/u=3712997108,442011921&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""><img src="https://img1.baidu.com/it/u=3851364429,4209170710&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">

    <script>

        // 常见事件  onload()   当内容加载完成之后执行  利用这个事件可以把script标签放在body前面

        window.onload = function (){

            console.log("1111")

        }

    </script> -->

<!-- <div id="box"></div>

    <script>

        // onscroll事件   当滚动条滚动的时候就会触发的事件

        // 作用:1.楼层导航

                // 2.顶部通栏和回到顶部按钮的显示

                // 3.渐进式显示页面

                // 4.瀑布流

        var _body = document.querySelector("body")

        _body.onscroll = function (){

            console.log("滚动条动了")

        }

    </script> -->

<style>

        body{

            width: 2000px;

            height: 2000px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <script>

        /*

            当页面比可视窗口宽和高时,会随着滚动被隐藏.被隐藏的部分就是  卷去的高度,和宽度

        */

        // 获取卷曲的高度

        //     文档       html              

        // 1.document.documentElement.scrollTop   使用必须要有DOCTYPE标签

        // 获取卷去宽度

        // 2.document.documentElement.scrollLeft   使用必须要有DOCTYPE标签

        // 绑定滚动条滚动的时候触发的事件

        // window.onscroll = function (){

        //     // 打印卷去高度

        //     console.log(document.documentElement.scrollTop)

        //     // 打印卷去宽度

        //     console.log(document.documentElement.scrollLeft)

        // }

        /* // 获取卷曲的高度方法二

        //     文档       html              

        // 1.document.body.scrollTop   使用必须没有DOCTYPE标签

        // 获取卷去宽度

        // 2.document.body.scrollLeft   使用必须没有DOCTYPE标签 */

        // window.onscroll = function (){

        //     console.log('body'+document.body.scrollTop)

        //     console.log('body'+document.body.scrollLeft)

        // }

    </script>

       

    <script>

        // 进行判断,有没有DOCTYPE标签都显示

        // 兼容写法  

        // 短路表达式:var scrollTop = document.documentElement.scrollTop || document.body.scrollTop   当前面满足条件之间执行第一个条件,不满足执行第二个条件

        window.onscroll = function (){

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

            console.log(scrollTop)

            console.log(scrollLeft)

        }

    </script>

<!-- <script>

        // onresize事件当改变可视窗口的大小的时候触发的事件

        // 作用:一般结合innerWidth  innerHeight  来判断屏幕尺寸  ,

        // 1.移动端横屏

        // 2.响应式布局,隐藏功能

        window.onresize = function (){

            console.log("浏览器可视窗口改变了")

        }

    </script> -->

<script>

        /*

            当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信

            息 。包括导致事件的元素（事件源）、事件的类型、以及其它与特定事件相关的

            信息。通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会

            自动分配一个参数，这个参数其实就是 event 对象。

        */

    </script>

    <div style="height: 1000px;"></div>

    <div id="btn">点我</div>

    <script>

        _btn = document.querySelector("#btn")

        _btn.onclick = function (){

            // console.log('111')

            // PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}

            // console.log(event)

            // ie低版本是evt  ，现在绝大部分浏览器都可以用

            // 兼容ie低版本的写法：

            // var e = evt || event

            // 获取鼠标相对于滚动的卷出距离+可视窗口的鼠标坐标距离

            // 34

            // console.log(event.pageX)

            // 1022

            // console.log(event.pageY)

           

            // 获取鼠标相对于可视窗口页面的坐标

            // 30

            // console.log(event.clientX)

            // 539

            // console.log(event.clientY)

            // 获取鼠标相对于事件源的坐标

            // 19

            // console.log(event.offsetX)

            // 11

            // console.log(event.offsetY)

        }

    </script>