JavaScript关于事件对象的一些问题

事件对象概述

 

当我们触发dom'的某个事件时，会产生一个事件对象event，event里包含了所有关于此事件的信息。所有的浏览器都支持event对象，但是支持的方式有一定差异。

 

chrome，Firefox，safari等浏览器支持event（带参数，任意参数）

ie678支持event window.event（无参数，内置）

 

事件对象的获取

 

火狐，谷歌，event获取是通过，在事件绑定的函数中加入参数，这个参数就是event

 

例如

 

box.onclick = function (aaa){  aaa就是event}

 

 

ie678中是通过 window.event直接获取

 

 

事件对象兼容性写法

既然ie678和主流浏览器有差异，随之带来的问题就是兼容性问题。

 

处理兼容问题的方法如下

 

 

给事件绑定函数中添加参数一般默认都写event（你也可以写其他，最好不要那么做）

事件绑定函数里面使用

var event  = event || window.event;

 

box.onclick = function (event){  var event  = event || window.event;}

 

 

事件对象的一些比较常用的东西。

重点

 

pageX   光标相对于该网页的水平位置

pageY   光标相对于该网页的垂直位置

 

screenX  光标相对于屏幕的水平位置

screenY  光标相对于屏幕的垂直位置

 

clientX  光标相对于该网页水平位置（当前可见区域）

clientY   光标相对于该网页垂直位置（当前可见区域）

 

 

pageY/pageX对不同浏览器有一定的兼容问题。

 

所以当我们获取的时候需要处理兼容，处理兼容时需要使用到scroll家族的内容，所以封装了一个方法

 

scroll（）方法如下

 

function scroll() {
                return {
                    "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
                    "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
                }
            }

 

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left