JS事件对象

文章目录

    • 事件对象概念
    • event常见属性
    • clientX和clientY、screenX和screenY、pageX和pageY的区别
      • 图示
    • 示例
      • 示例一
      • 示例二

事件对象概念

比如onclick、onfocus、onmousedown、onmouseover…都称作事件对象
示例:

 btn.onclick = function(event){
            //这里的event就是当前事件的对象,简称事件对象
  }

注意:
(1)只要触发dom上的某个事件时,会产生一个事件对象event,这个对象中包含所有与事件有关的信息
(2)event常见属性要会使用

event常见属性

  1. type属性
    返回数据的类型
  2. target属性
    该事件被传送的对象
  3. clientX和clientY
    光标(鼠标)相对于该网页的水平位置和垂直位置
  4. screenX和screenY
    光标(鼠标)相对于该屏幕的水平位置和垂直位置
  5. pageX和pageY
    光标(鼠标)相对于该网页的水平位置和垂直位置(不适用于IE,网页存在分页时起作用)
  6. width和height
    该窗口或框架的宽度或高度
  7. data
    返回拖拽对象的URL字符串

clientX和clientY、screenX和screenY、pageX和pageY的区别

(1)clientX和clientY是以当前可视区域为基准,类似于固定定位
(2)screenX和screenY是以屏幕为基准进行测量,即:当前元素距离屏幕的尺寸
(3)pageX和pageY是以当前文档(绝对定位)为基准,不适用于IE6-8

图示

假设蓝色框代表电脑屏幕,红色框代表当前可视区域,紫色框代表某一盒子元素。则蓝色的线代表screenX和screenY,红色的线代表clientX和clientY。pageX和pageY代表当前网页可滚动时距离红色边框的距离。
JS事件对象_第1张图片

示例

示例一

注意:
(1)事件对象的兼容写法: var event = event || window.event ;
(2)mouseoverclick 都是鼠标事件对象(MouseEvent),但两者的type相同,一个是mouseover,另一个是click

<body>
    <button id="btn">点我</button>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(event){   //事件对象event
        var event = event || window.event ;    //兼容写法
        console.log(event.target);
        console.log(event);   //鼠标事件  
        console.log(event.type);
    });   

    btn.addEventListener('mouseover',function(event){   //事件对象event
        var event = event|| window.event ;    //兼容写法

        console.log(event.target);
        console.log(event);   //鼠标事件 
        console.log(event.type);
        console.log("我是分割线");
    });  
 </script>
</body> 

JS事件对象_第2张图片

示例二

注意:
(1)以下的示例已将浏览器的屏幕缩小
(2)请看下面第一张图:当浏览器中的滑轮没有滚动时,pageX、pageY与clientX、clientY的值相同
(3)请看下面第二张图:当浏览器中的滑轮滚动时,pageX、pageY与clientX、clientY的值不相同

<style>
    #box {
        width: 200px;
        height: 200px;
        background-color:skyblue;
    }
</style>
<body>
    <div id="box"></div> 
    <div id="box"></div>
    <div id="box"></div>
    <div id="box"></div>

<script>
    document.addEventListener('click',function(event){
        var e = event || window.event;

        console.log(e.screenX + ',' + e.screenY);
        console.log(e.clientX + ',' + e.clientY);

        //页面无滚动时,和clientX、clientY作用一样
        //pageX和pageY会考虑滚动的长度和宽度
        console.log(e.pageX + ',' + e.pageY);

    });
</script>

</body> 

JS事件对象_第3张图片
JS事件对象_第4张图片

你可能感兴趣的:(JavaScript)