原生JS与jQuery中事件对象的三大坐标详解

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

那么事件有三大要素：
1、事件源：dom对象
2、事件类型：具体参照W3C的javas事件参考手册
这里写图片描述
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>

这里写图片描述

展开之后，两者的内容是一样的：
这里写图片描述
这里是jQuery的事件对象：

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

原生JS中的三大家族：
screen（screenX与screenY）坐标：屏幕的左上角到我触发点的距离
这里写图片描述
client（clientX与clientY）坐标：浏览器可视区域的左上角距离触发点的距离

注意：页面滚动做了client这个值会发生变化的，它的参照对象是页面的可视区。

page（pageX与pageY）坐标：不管浏览器是否滚动，都是距离浏览器左上角的距离。
这里写图片描述
注意：它与页面未被滚动时的client坐标对应的值是一致的。

原生的具体代码：

  <!-- 这里是原生代码 -->
    <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>

好了，知道了事件对象以及事件对象的三大坐标，下一节我们利用事件对象实现登录框的可拖拽的功能。

原生JS与jQuery中事件对象的三大坐标详解

猜你喜欢