当前位置：首页 > news >正文

前端知识点 --- 事件监听器(javascript)

news 来源：原创 2025/4/27 10:43:21

事件监听

✅ 事件监听的基本语法

element.addEventListener(event, function, useCapture);

element：目标元素。

event：事件类型，如 ‘click’、‘mouseover’、‘keydown’ 等。

function：事件发生时执行的回调函数。

useCapture (可选)：true 表示在捕获阶段触发事件，false 表示在冒泡阶段触发事件（默认）。

🧑‍💻 示例 1：点击事件

<button id="myButton">点击我</button>

<script>
  let button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('你点击了按钮！');
  });
</script>

✅ 解释：

当你点击按钮时，事件监听器会捕捉到 ‘click’ 事件并执行弹窗。

🧑‍💻 示例 2：鼠标移入事件

<div id="box" style="width:200px;height:200px;background-color:lightblue;">
  移入我看看
</div>

<script>
  let box = document.getElementById('box');
  box.addEventListener('mouseover', function() {
    box.style.backgroundColor = 'lightcoral';
  });

  box.addEventListener('mouseout', function() {
    box.style.backgroundColor = 'lightblue';
  });
</script>

✅ 解释：

鼠标移入 mouseover 时，背景颜色变红。

鼠标移出 mouseout 时，背景颜色恢复。

✅ 事件冒泡和事件捕获
事件冒泡：事件从目标元素开始，逐层向父级元素冒泡传递。

事件捕获：事件从最顶层的父元素开始，逐层向目标元素传递。

document.body.addEventListener('click', function() {
  console.log('body被点击了');
}, true); // 使用事件捕获

document.getElementById('myButton').addEventListener('click', function() {
  console.log('按钮被点击了');
}, false); // 使用事件冒泡

✅ 解释：

如果 true，事件在捕获阶段执行。

如果 false，事件在冒泡阶段执行（默认）。

✅ 常见事件类型
鼠标事件：click、dblclick、mousedown、mouseup、mousemove

键盘事件：keydown、keyup、keypress

表单事件：submit、change、input、focus

窗口事件：resize、scroll、load、unload

e.preventDefault();

e.preventDefault(); 是 JavaScript 中阻止事件的默认行为的方法。它常用于表单、链接、按钮等事件处理中。

✅ 语法

element.addEventListener('event', function(e) {
  e.preventDefault();
});

e：事件对象，代表事件的详细信息。

preventDefault()：阻止事件的默认行为。

✅ 实际应用场景

阻止链接跳转

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();
  console.log('链接被点击，但没有跳转');
});

场景：链接点击后需要执行其他操作，而不是跳转到链接地址。

阻止表单提交

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('表单提交已阻止');
});

场景：在表单验证失败时阻止提交。

阻止右键菜单

document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
  console.log('右键菜单已被阻止');
});

场景：实现自定义右键菜单。

✅ 注意事项
preventDefault() 只阻止默认行为，不影响事件的传播。

如果要阻止事件冒泡，需要使用 e.stopPropagation()。

某些情况下，preventDefault() 无法生效，例如：

在 disabled 的按钮上点击。

在某些系统级别的浏览器操作中（如 F5 刷新）。

e.stopPropagation()

事件冒泡是指当一个元素上的事件被触发时，事件会从目标元素向它的祖先元素逐级传播，直到到达 document 根节点的过程。

e.stopPropagation() 可以阻止事件向上冒泡，防止事件传播到父级元素。

✅ 事件冒泡的示意图
假设有以下 HTML 结构：

<div id="grandparent">
  <div id="parent">
    <button id="child">点击我</button>
  </div>
</div>

如果在每个元素上都绑定了 click 事件：

document.getElementById('grandparent').addEventListener('click', function() {
  console.log('祖父元素被点击');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素被点击');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('子元素被点击');
});
点击按钮后的结果：

子元素被点击
父元素被点击
祖父元素被点击
这就是事件冒泡的过程：事件从子元素向上层父级依次触发。

✅ 阻止事件冒泡
使用 e.stopPropagation() 可以阻止事件继续向上传播。

document.getElementById('child').addEventListener('click', function(e) {
  console.log('子元素被点击');
  e.stopPropagation(); // 阻止事件冒泡
});

点击按钮后的结果：

子元素被点击
父元素和祖父元素的事件不再触发。

✅ 应用场景

模态框中的事件阻止冒泡
在弹窗中点击关闭按钮时，可能不希望点击事件冒泡到背景导致弹窗关闭：

document.getElementById('modal').addEventListener('click', function() {
  console.log('关闭弹窗');
});

document.getElementById('close-btn').addEventListener('click', function(e) {
  console.log('点击了关闭按钮');
  e.stopPropagation();
});

点击关闭按钮时只会输出 “点击了关闭按钮”，不会触发背景的关闭事件。

阻止导航栏中的事件冒泡
在下拉菜单点击时，不希望触发外部 document 的点击事件：

document.getElementById('dropdown').addEventListener('click', function(e) {
  console.log('点击了下拉菜单');
  e.stopPropagation();
});

document.addEventListener('click', function() {
  console.log('关闭下拉菜单');
});