事件对象的兼容

  • 事件对象的兼容已关闭评论
  • 41 次浏览
  • A+
所属分类:Web前端
摘要

每个事件函数天生有一个参数叫event,它是事件对象,如果想修改event的名称,事件函数的第一个参数就是用来修改的

每个事件函数天生有一个参数叫event,它是事件对象,如果想修改event的名称,事件函数的第一个参数就是用来修改的

<div id="div"></div>  var oDiv = document.getElementById("div");  oDiv.onclick = function() {     console.dir(arguments); };   document.body.onclick = function(e) {     console.dir(e);  //MouseEvent  

当我们触发#div的点击行为的时候,会执行对应绑定的方法

不仅仅把绑定的方法执行了,而且浏览器还默认的给这个方法传递了一个参数值,叫做MouseEvent,叫做鼠标事件对象,是一个对象属性类型的值

  • 它是一个对象数据类型的值,里面包含了很多的属性名和属性值,这些都是用来记录当前鼠标的相关信息的。

    鼠标移动的坐标:

    page:针对于整个页面的左顶点 常用

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

    client:针对于可视窗口的左顶点 不常用

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

    offset:针对于父元素的左顶点 常用于拖拽

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

    案例:跟随鼠标移动

    <script>     //事件元素:大白板     //事件类型:onmousemove     //事件对象:获取鼠标的坐标,将坐标赋值给box的left和top     // (一个元素要在页面发生位移,本质就是在修改left和top)   var oTiger = document.querySelector("#tiger");   //给整个页面绑定:鼠标移动事件   document.onmousemove = function(evt){    //兼容的方式获取event对象     var e = evt || event;     // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。     //注意,如果想通过 style.left 来设置属性,一定要给 box1开启绝对定位。     oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px";     oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px"; } 
  • MouseEvent,往上找是UIEvent,然后是Event,最后是Object,这是它的原型链

  • MouseEvent记录的是页面中唯一一个鼠标每一次触发时候的相关信息,和到底是在哪个元素上触发的没有关系

    事件对象本身的获取存在兼容问题

    标准浏览器中是浏览器给方法传递的参数,

    我们只需要定义形参e就可以获取到。

    而IE6~8中浏览器不会给方法传递参数e,我们如果需要的话,

    在IE6,7,8下只能用window.event中获取查找

var e = evt || event; 
  1. event 使用前提,必须有事件 不同的对象产生的事件不同
  2. event 代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
  3. event 对象只在事件发生的过程中才有效。
  4. event 的某些属性只对特定的事件有意义。比如,fromElementtoElement属性只对onmouseoveronmouseout事件有意义。

传进来这个e,在iE9以上才有

在IE6,7,8时,e是不会传进去的

window.event谷歌下也有,IE6,7,8下也有,但是火狐下没有window.event

所以IE6,7,8下只能用window.event

而IE9,谷歌,火狐等标准浏览器,e都是可以用的

 oDiv.onclick = function (e) {      console.dir(e);    //->IE6,7,8下是存在window.event里面的       console.dir(window.event);   }