事件对象的兼容

每个事件函数天生有一个参数叫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);
  }
作者:千帆qf 原文地址:https://www.cnblogs.com/qianfanqf/p/16927780.html

%s 个评论

要回复文章请先登录注册