JS中event对象中的常见属性

在事件函数中，其实是可以写参数的，写法：

<script>
    var btn = document.getElementById("btn");

    btn.onclick = function (event) {
            var e = event || window.event;
            console.log(e.target);
        };

        btn.onmouseover = function (event) {
            var e = event || window.event;//为了兼容
            console.log(e.target);
    }
</script>

事件函数里面有几个常用的属性，我们来看一下：

1.screenX\/screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸

2.pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;会计算滚动长度

3.clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。会忽略滚动长度

它们常常和offset家族联合使用来动态获取鼠标相对于盒子的位置（距离盒子边框的距离）：

<script>
    var box = document.getElementById("box");
    box.onmousemove = function (event) {
        var e = event || window.event;

        var x = event.clientX - box.offsetLeft;
        var y = event.clientY - box.offsetTop;
        // console.log(x, y);

        box.innerText = '(x: ' + x +', y:' + y +')';
    }
</script>