JavaScript之event对象位置属性图解

作者: 贵在随心 | 来源:发表于2017-09-24 15:52 被阅读37次

JavaScript之event对象位置属性图解
javascript原型链图解
javascript 原生实现拖拽
事件
常见的浏览器兼容性问题
js事件1 event对象事件冒泡
20-第二十章 event对象阻止冒泡注册/ 移除监听事件
js的prototype
JavaScript - prototype理解
常见event对象

在做web 开发时，总是避免不了用户与浏览器之间的交互，这个过程我们称作事件。而在这个过程我们总是需要知道一些浏览器和事件相关的信息，这篇文章我们来了解一些 JavaScript 中窗口、视口和元素大小的相关信息，这篇文章我们来熟悉一下JavaScript 中关于 event 对象的位置属性，并附上图解方便理解。
JavaScript 中的event位置属性有：offsetX、offsetY、pageX、pageY、clientX、clientY、screenX、screenY、layerX、layerY、x、y。

首先我们先看一下个浏览器对这些属性的支持情况，如下图：

image.png

图解offsetX、clientX、pageX、screenX属性

image.png

layerX、layerY图解

image.png

event.x 和 event.y 的图解

image.png

测试代码如下：

<!DOCTYPE HTML>  
<html lang="zh-cn">  
    <head>  
        <meta charset="utf-8"/>  
        <title>Javascript之event 位置属性解析</title>  
        <style>  
        body {
            margin: 0;
            padding: 0;
            background: #ccc;
            font-size: 12px;
            overflow: auto;
        }
        .main {
            width: 500px;
            height: 330px;
            position: relative;
            margin: 250px auto 0;
            background-color: #eee;
        }
        .box {
            position: absolute;
            width: 220px;
            height: 180px;
            background-color: orange;
            top: 80px;
            left: 80px;
        }
        </style>  
    </head>  
    <body style="height:1600px;">  
    
        <div class="main">  
            <div class="box"id="box"></div>  
        </div>  

        <script>  
        var oBox = document.getElementById('box');
        window.onload = function() {
            oBox.onmousedown = function(ev) {
                ev = ev || window.event;
                console.log(ev.offsetX, ev.offsetY);
                console.log(ev.clientX, ev.clientY);
                console.log(ev.pageX, ev.pageY);
                console.log(ev.screenX, ev.screenY);
                console.log(ev.layerX, ev.layerY);
                console.log(ev.x, ev.y);
            }
        }
        </script>  
    </body>  
</html>