在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。

1. 事件类型 event.type

event.type 是事件类型，返回触发的事件名称。

例如 :

document.body.onclick = function(){
    console.log(event.type); // click
}

2. 事件相关元素

2.1 触发事件的元素

event.target 是触发事件的元素，在老版本的IE浏览器中请使用 event.srcElement 来替代它。

2.2 绑定事件的元素

event.currentTarget 是绑定事件的元素，IE >=9 支持。

tips：触发事件的元素不一定就是绑定事件的元素，因为存在事件冒泡，点击某个元素的子元素，那么父元素绑定的事件中，触发事件的元素为子元素，绑定事件的元素为父元素。

例如：

<p>
    <span>hello</span>
</p>
<script>
    var pEle = document.querySelector("p");
    pEle.onclick = function(){
        // 点击文字，输出如下内容
        console.log(event.target); // span
        console.log(event.currentTarget); // p
    }
</script>

小知识：在非行内绑定的事件中，event.currentTarget 与事件处理函数中的 this 相同，均为绑定事件的元素。


3. 鼠标的按键信息

相关事件：mousedown、mouseup

3.1 event.button

当鼠标事件触发的时，如果鼠标按钮被按下（如果有的话），将会返回一个数值。 0 表示左键，1 表示鼠标滚轮，2 表示右键

3.2 event.which

当鼠标事件触发时，表示被按下的按钮。值为1、2、3，与上方的 event.button 返回信息0、1、2对应。

相关：contextmenu 事件是浏览器右键菜单的事件，我们可以通过这个事件来控制右键菜单的显示与否或者重写右键菜单内容。

例如：

// 禁止浏览器右键
document.oncontextmenu = function() {
    event.preventDefault(); // 阻止默认事件
    event.returnValue = false;
}

4. 鼠标的位置信息

鼠标事件几乎都有

属性名 说明
pageX/pageY 获取事件触发时鼠标相对于页面的位置(包含滚动条卷进去的距离)
clientX/clientY 获取事件触发时鼠标相对于可视区域的位置(包含滚动条卷进去的距离)
offsetX/offsetY 获取事件触发时鼠标在触发事件的元素中的落点位置(不包括border)
screenX/screenY 获取事件触发时鼠标落点位置相对于屏幕的位置，不常用
offsetWidth 返回对象的padding+border+width属性值之和(只读的数字,使用时需要加单位)
offsetHeight 返回对象的padding+border+height属性值之和(只读的数字,使用时需要加单位)
x/y clientX/clientY的别名 
document.body.onclick = function(){
    console.log("对于页面", {
        x: event.pageX,
        y: event.pageY
    });

    console.log("对于可视区域", {
        x: event.clientX,
        y: event.clientY
    });
}
<style>
    .box {
        width: 200px;
        height: 200px;
        margin: 100px;
        border: 20px solid #000;
        background-color: #f00;
    }
    .inner {
        width: 100px;
        height: 100px;
        margin: 50px;
        border: 10px solid #fff;
    }
</style>
<body>
    <div class="box">
        <div class="inner">

        </div>
    </div>

    <script>
        var box = document.querySelector(".box");
        box.onclick = function(){
            console.log({ x: event.offsetX, y: event.offsetY });
        }
    </script>
</body>

5. 键盘信息

相关事件：onkeydown、onkeyup

属性名 说明
key 按键表示的值内容
keyCode 获取输入键盘的键码
altKey 触发事件时 alt 键是否被按下
ctrlKey 触发事件时 ctrl 键是否被按下
shiftKey 触发事件时 shift 键是否被按下

例如：

// 监听按回车键
document.onkeydown = function() {
    if(event.key == "Enter" || event.keyCode == 13){
        alert("您按了回车");
    }
}
// 阻止浏览器通过 F12 打开开发者工具
document.onkeydown = function() {
    if (window.event && window.event.key == "F12") {
        event.preventDefault(); // 阻止默认事件
        event.returnValue = false;
        return false; 
    } 
}

6. 练习

元素跟随鼠标移动

<img src="https://img.jianbihua.com/sites/default/files/styles/photo300x200/public/images/2018-06/9_282.jpg" alt=""  class="rabbit">
.rabbit {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
        }
// 获取元素
var rabbit = document.getElementsByClassName('rabbit')[0];

// 绑定事件
document.onmousemove = function (e) {
     // 设置鼠标的位置为偏移量
     // rabbit.style.left = e.clientX + 'px';
     // rabbit.style.top = e.clientY + 'px';

     // 如果想让鼠标始终保持在元素中间,使用以下方法
     rabbit.style.left = (e.clientX - rabbit.offsetWidth / 2) + 'px';
     rabbit.style.top = (e.clientY - rabbit.offsetHeight / 2) + 'px';
}
文档更新时间: 2023-04-19 19:49   作者：孙老师