欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

程序员文章站 2022-04-25 15:17:28
...

首先我们先介绍什么是事件:
事件就是某一个对象在特定的时刻做了某一件事。比如:点击事件,当我点击了按钮后变触发了点击事件浏览器会做出相应的响应。

那么事件有三大要素:
1、事件源:dom对象
2、事件类型:具体参照W3C的javas事件参考手册
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
3、事件响应:一般是一个函数,称之为事件处理函数

原生JS注册事件的语法:

    //原生注册事件语法:
     document.getElementById("box").onclick = function() {
         //点击盒子输出111
         console.log('111');
     }

jQuery中也是同样遵循上面的事件三元素的,其注册语法是:

 //入口函数,所有的代码是包含在入口函数里面的
        $(function(){

            $('#box').on("click",function(){
                /* 具体语法:
                   $(选择器).on(事件类型,事件处理函数)
                */
            })
        })

二:事件对象
什么又是事件对象呢?

A、当某一个事件被触发时(例如点击事件),此时浏览器会记录触发时的某些信息, 例如你是在哪个位置点击的,你在点击的时候是直接鼠标左键点击的,还是鼠标左右键一起点击(骚操作)的等等 浏览器把这些所有的信息放到一个变量中存储,这个变量的数据类型是对象,所以称之为事件对象。

B、如何获取事件对象:只需要给事件函数传递一个参数,要么是event要么是就可以了。

   <!-- 这里是原生代码 -->
    <script>
        //原生注册事件语法:
        document.getElementById("box").onclick = function(e) {
            //兼容性处理
            e = e || window.event;
            //输出事件对象观察
            console.log(e);

        }


    </script>

    <script src="jquery-1.12.4.js"></script>
    <!-- 这里是jQuery的代码 -->
    <script>
        //入口函数,所有的代码是包含在入口函数里面的
        $(function(){

            $('#box').on("click",function(e){
                //兼容性处理
                e = e || window.event;
                //输出事件对象观察
                console.log(e);
            })
        })

    </script>

原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

展开之后,两者的内容是一样的:
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
这里是jQuery的事件对象:
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

           **现在介绍每次都主角:事件的三大坐标**

原生JS中的三大家族:

screen(screenX与screenY)坐标:屏幕的左上角到我触发点的距离
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

client(clientX与clientY)坐标:浏览器可视区域的左上角距离触发点的距离
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
注意:页面滚动做了client这个值会发生变化的,它的参照对象是页面的可视区。
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

page(pageX与pageY)坐标:不管浏览器是否滚动,都是距离浏览器左上角的距离。
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX
注意:它与页面未被滚动时的client坐标对应的值是一致的。

offset(offsetX与offsetY)坐标:相对于事件源的XY坐标.
原生JS与jQuery中事件对象的坐标详解screenX/clientX/pageX/offsetX

原生的具体代码:

  <!-- 这里是原生代码 -->
    <script>
        //原生注册事件语法:
        document.getElementById("box").onclick = function(e) {
            //兼容性处理
            e = e || window.event;
            //输出事件对象观察
            console.log(e);
            //电脑屏幕的左上角,距离你触发事件的那一点的x值和y值。
            console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY);
            //浏览器可视区域,距离触发事件的那一点的x值和y值
            console.log("e.clientX:"+e.clientX+"---e.clientY:"+ e.clientY);
            //页面的左上角(哪怕页面滚走了,还是页面左上角),距离触发事件的那一点的x值和y值。
            //浏览器兼容问题:IE8及之前不支持
            console.log("e.pageX:"+e.pageX+"---e.pageY:"+ e.pageY);

            // console.log ( getPagePoint ( e ).pageX, getPagePoint ( e ).pageY );

        }


    </script>

jQuery中的事件坐标:
与原生的事件坐标的一模一样。
代码段:

<!-- 这里是jQuery的代码 -->
    <script>
        //入口函数,所有的代码是包含在入口函数里面的
        $(function(){

            $('#box').on("click",function(e){
                //兼容性处理
                e = e || window.event;
                //输出事件对象观察
                console.log(e);
                //电脑屏幕的左上角,距离你触发事件的那一点的x值和y值。
                console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY);
                //浏览器可视区域,距离触发事件的那一点的x值和y值
                console.log("e.clientX:"+e.clientX+"---e.clientY:"+ e.clientY);
                //页面的左上角(哪怕页面滚走了,还是页面左上角),距离触发事件的那一点的x值和y值。
                //浏览器兼容问题:IE8及之前不支持
                console.log("e.pageX:"+e.pageX+"---e.pageY:"+ e.pageY);

            })
        })

    </script>

好了,知道了事件对象以及事件对象的三大坐标,关于事件对象里面的其他内容,敬请期待.