深入理解 DOM 事件机制系列第三篇——事件对象

目录#

事件对象的基本概念
事件对象的属性
- 常见的鼠标事件属性
- 键盘事件属性
- 通用属性
事件对象的方法
- preventDefault()
- stopPropagation()
- stopImmediatePropagation()
事件对象的兼容性处理
最佳实践与示例用法
总结
参考

1. 事件对象的基本概念#

事件对象是浏览器在触发事件时自动创建的一个对象，它作为参数传递给事件处理函数。不同类型的事件（如点击事件、键盘事件等），事件对象包含的属性和方法会有所不同，但都遵循一定的规范。

例如，在一个点击事件处理函数中：

document.getElementById('myButton').addEventListener('click', function(event) {
    // 这里的 event 就是事件对象
});

2. 事件对象的属性#

2.1 常见的鼠标事件属性#

clientX 和 clientY：鼠标指针相对于浏览器窗口可视区域的水平和垂直坐标（不包含滚动条）。

document.addEventListener('mousemove', function(event) {
    console.log('鼠标在窗口内的坐标：', event.clientX, event.clientY);
});

pageX 和 pageY：鼠标指针相对于整个页面（包括滚动部分）的水平和垂直坐标。

document.addEventListener('mousemove', function(event) {
    console.log('鼠标在页面内的坐标：', event.pageX, event.pageY);
});

screenX 和 screenY：鼠标指针相对于屏幕的水平和垂直坐标。

document.addEventListener('mousemove', function(event) {
    console.log('鼠标在屏幕内的坐标：', event.screenX, event.screenY);
});

button：表示按下的鼠标按钮。0 表示主按钮（通常是左键），1 表示中间按钮，2 表示右键。

document.addEventListener('click', function(event) {
    if (event.button === 0) {
        console.log('左键点击');
    } else if (event.button === 2) {
        console.log('右键点击');
    }
});

2.2 键盘事件属性#

keyCode：（不推荐使用，已废弃）表示按下的键盘按键的 ASCII 码。
key：表示按下的键盘按键的字符（更推荐使用）。

document.addEventListener('keydown', function(event) {
    console.log('按下的键：', event.key);
});

code：表示按下的键盘按键的物理位置（例如“KeyA”表示 A 键的位置）。

document.addEventListener('keydown', function(event) {
    console.log('按键的物理位置：', event.code);
});

2.3 通用属性#

target：触发事件的目标元素（事件最初发生的元素）。

document.getElementById('parent').addEventListener('click', function(event) {
    console.log('事件目标：', event.target);
});

currentTarget：当前正在处理事件的元素（即绑定事件处理函数的元素）。

document.getElementById('parent').addEventListener('click', function(event) {
    console.log('当前处理事件的元素：', event.currentTarget);
});

type：事件的类型（如“click”、“mousemove”等）。

document.addEventListener('click', function(event) {
    console.log('事件类型：', event.type);
});

3. 事件对象的方法#

3.1 preventDefault()#

该方法用于阻止事件的默认行为。例如，在链接的点击事件中，阻止其跳转：

<a href="https://example.com" id="myLink">点击我</a>
<script>
    document.getElementById('myLink').addEventListener('click', function(event) {
        event.preventDefault();
        console.log('阻止了链接的默认跳转');
    });
</script>

3.2 stopPropagation()#

该方法用于阻止事件冒泡（事件从目标元素向上传播到祖先元素的过程）。

<div id="parent">
    <div id="child"></div>
</div>
<script>
    document.getElementById('child').addEventListener('click', function(event) {
        console.log('子元素点击');
        event.stopPropagation();
    });
    document.getElementById('parent').addEventListener('click', function(event) {
        console.log('父元素点击');
    });
</script>

当点击子元素时，只会触发子元素的点击事件处理函数，不会冒泡到父元素。

3.3 stopImmediatePropagation()#

该方法不仅阻止事件冒泡，还阻止当前元素上其他相同类型事件处理函数的执行。

<div id="element">
</div>
<script>
    document.getElementById('element').addEventListener('click', function(event) {
        console.log('第一个点击事件处理函数');
        event.stopImmediatePropagation();
    });
    document.getElementById('element').addEventListener('click', function(event) {
        console.log('第二个点击事件处理函数（不会执行）');
    });
</script>

当点击元素时，只会执行第一个点击事件处理函数，第二个不会执行。

4. 事件对象的兼容性处理#

在旧版本的 Internet Explorer（IE8 及以下）中，事件对象不是作为参数传递给事件处理函数，而是通过 window.event 获取。为了兼容，可以这样写：

function handleClick(event) {
    event = event || window.event;
    // 后续使用 event 对象
}
document.getElementById('myButton').onclick = handleClick;

5. 最佳实践与示例用法#

5.1 表单验证#

<form id="myForm">
    <input type="text" id="username" required>
    <input type="submit" value="提交">
</form>
<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        var username = document.getElementById('username').value;
        if (username === '') {
            event.preventDefault();
            alert('用户名不能为空');
        }
    });
</script>

通过 preventDefault() 阻止表单的默认提交行为，进行前端验证。

5.2 拖拽效果#

<div id="draggable" draggable="true">可拖拽元素</div>
<script>
    document.getElementById('draggable').addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', 'drag data');
    });
    document.addEventListener('dragover', function(event) {
        event.preventDefault();
    });
    document.addEventListener('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData('text/plain');
        console.log('拖拽的数据：', data);
    });
</script>

利用事件对象的属性和方法实现简单的拖拽功能。

6. 总结#

事件对象是 DOM 事件机制中的关键组成部分，通过它我们可以获取事件的详细信息，控制事件的行为（如阻止默认行为、阻止冒泡等）。在实际开发中，要注意不同浏览器的兼容性问题，合理运用事件对象的属性和方法，实现丰富的交互效果。

目录#