九、事件对象和属性

当函数执行的时候，会产生一系列的信息，浏览器会将这些信息收集起来并封装成对象，传递到事件对象中。

举例：

// 获取元素
var box = document.getElementById("box");
// 绑定事件
    box.onclick = function(e){
        // 当函数执行的时候，会产生一系列的信息，浏览器会将这些信息收集起来并封装成对象，传递到事件对象中
        console.log(e);    // 事件对象
    }

输出结果：

9.1 offsetX offsetY鼠标位于元素内部的位置

这两个属性标记了鼠标位于元素内部的位置，会受到子元素的影响

console.log(e.offsetX, e.offsetY);

9.2 clientX clientY鼠标位于视口中的位置

这两个属性标记了鼠标位于视口中的位置

页面 : 整个全部页面

视口 : 屏幕所显示的区域

console.log(e.clientX, e.clientY);

9.3 pageX pageY 鼠标位于页面中的位置

这两个属性标记的是鼠标位于页面中的位置，当页面打开的时候默认是首屏的位置。

此时，clientX、clientY与pageX、pageY的值是相同的。

当页面滚动条位置改变之后，它们的值将不一致

IE浏览器低版本没有pageX、pageY属性

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

9.4 screenX screenY 鼠标位于屏幕中的位置

这两个属性标记的是鼠标位于屏幕中的位置

console.log(e.screenX, e.screenY);

9.5 IE中的事件对象

在IE中，没有将时间对象传递到函数中。

其实，在window.event身上

console.log(window.event);

由于在IE中不能点击输出显示，我们用for in循环输出

// 获取元素
var box = document.getElementById("box");
// 绑定事件
box.onclick = function(e){
    // 输出事件对象
    // console.log(e);

    // IE中没有将事件对象传递，而是在window.event身上
    console.log(window.event);
    for (var i in window.event){
        console.log(i);
    }
}

兼容方式：

var e = e || window.event （e = e 或 window.event）

// 兼容方式：
var e = e || window.event;  // 短路语法，有e用e，没有就用后面的
console.log(e);

9.6 总结

• dom0级：

  • 在高级浏览器中：事件对象可以被传递到事件函数中

  • 在IE中：事件对象没有被传递进来

  • this指向触发事件的对象

• dom2级：

  • 事件对象可以被传到事件函数中

  • this指向触发事件的对象

• attachEvent：

  • 事件对象可以被传递到事件函数中

  • this指向window