QD1-P56~58 JS 事件介绍

title: QD1-P56~58 JS 事件介绍

description: JavaScript事件 知识点介绍

video: [视频教程](https://www.bilibili.com/video/BV1n64y1U7oj?p=56)，但这篇文章不参考视频。

subject：前端学习笔记 1

‍

事件是用户与网页交互的核心，通过事件机制，开发者可以根据用户行为动态响应和处理不同的交互情况，比如点击按钮、提交表单、滚动页面等。

‍

1 事件的基本概念

‍

1.1 事件触发

当用户与页面发生交互（如点击、滚动、键盘输入等），或者页面本身发生某些变化（如加载完成、大小调整等）时，事件就会触发。浏览器会捕获这些事件，并执行指定函数。

‍

1.2 常见事件列表

TIP

这里列出了一些常见的事件：

1.用户交互

鼠标事件

click：单击事件

dblclick：双击事件

mousedown：鼠标按下事件

mouseup：鼠标释放事件

mousemove：鼠标移动事件

mouseenter、mouseleave：鼠标进入或离开元素事件

contextmenu：右键点击事件

键盘事件

keydown：按下键盘键事件

keyup：释放键盘键事件

keypress：按下字符键事件（逐渐被弃用）

触摸事件（移动设备）

touchstart：手指触摸事件

touchmove：手指移动事件

touchend：手指离开事件

‍

2.按表单交

submit：表单提交事件

input：输入内容时触发

change：表单元素值改变事件

focus：元素获得焦点事件

blur：元素失去焦点事件

‍

3.窗口事件

load：页面或资源加载完成事件

resize：窗口大小变化事件

scroll：页面滚动事件

unload：页面卸载事件

‍

1.3 事件监听（Event Listener）

事件监听器：

事件监听器是指一种机制，允许开发者“监听”某个元素的特定事件。一旦该事件发生，监听器就会调用指定的函数进行处理。这种处理函数通常被称为“事件处理器”或“回调函数”。

‍

添加事件监听器：

使用 addEventListener 方法是最常见的方式：
element.addEventListener('event', function(event) {
     
     
  // 处理事件的代码
});
element：要监听事件的 DOM 元素。

event：事件的类型（如 'click'、'keyup' 等）。

function(event)：事件处理器，事件触发时执行的函数。

‍

例如

准备一个页面，如下

在body标签的后面添加两个事件监听器
<script type="text/javascript">
	//鼠标进入事件
	document.getElementById("标题与前言").addEventListener('mouseenter', function(event) {
     
     
		this.style.color = "red"; //修改字体效果
	});

	//鼠标离开事件
	document.getElementById("标题与前言").addEventListener('mouseleave', function(event) {
     
     
		this.style.color = "black"; //修改字体效果
	});
</script>
效果（鼠标移动到指定标签上时改变字体颜色）

‍

1.4 事件对象（Event Object）

每当事件触发时，浏览器会生成一个与该事件相关的对象，称为“事件对象”。事件对象包含与该事件相关的各种信息，例如事件的类型、触发事件的元素、鼠标的坐标、按下的键等。

‍

通过事件处理函数的参数获取事件对象：

<script type="text/javascript">
	//鼠标进入事件
	document.getElementById("标题与前言").addEventListener('mouseenter', function(event) {
     
     
		this.style.color = "red"; //修改字体效果
		console.log(event.target); //打印触发对象	
	});

	//鼠标离开事件
	document.getElementById("标题与前言").addEventListener('mouseleave', function(event) {
     
     
		this.style.color = "black"; //修改字体效果
		console.log(event.target); //打印触发对象	
	});
</script>

‍

触发一下

recording

‍

上文console.log(event.target);这句代码的作用是：将触发事件的元素，输出到console中

Clip_2024-10-22_00-01-28

‍

事件类型

鼠标事件：如 click（点击）、dblclick（双击）、mousemove（鼠标移动）、mouseenter（鼠标进入元素区域）等。
键盘事件：如 keydown（按下键盘）、keyup（释放键盘）、keypress（按下字符键，已逐渐弃用）。
表单事件：如 submit（表单提交）、input（表单输入）、change（表单值改变）。
窗口事件：如 load（页面加载完成）、resize（窗口大小改变）、scroll（页面滚动）。
触摸事件：如 touchstart、touchmove、touchend，通常用于移动设备的交互。

‍

事件传播模型

JavaScript 中的事件遵循事件传播模型，包括事件捕获和事件冒泡两个阶段：

事件捕获（Capturing）
在事件捕获阶段，事件从最外层的祖先元素开始，向内层元素传递，直到目标元素。这一阶段的目的是让父元素先“捕获”事件。
事件冒泡（Bubbling）
在事件冒泡阶段，事件从目标元素向外层元素依次传递，最终传播到最外层的祖先元素。冒泡是 JavaScript 默认的事件传播方式。
```
// 捕获阶段的监听
element.addEventListener('click', handler, true);
// 冒泡阶段的监听（默认）
element.addEventListener('click', handler, false);
```

‍

阻止事件传播

阻止默认行为
某些事件有默认行为，如点击链接会跳转页面，提交表单会刷新页面。通过 event.preventDefault() 可以阻止这些默认行为。

阻止表单提交

element = document.getElementById('myForm');
element.addEventListener('submit', function(event) {
      
      
  // 表单验证逻辑
  if (!isFormValid()) {
      
      
    event.preventDefault(); // 阻止表单提交
  }
});

阻止链接默认行为

element = document.getElementById('myLink');
element.addEventListener('click', function(event) {
      
      
  event.preventDefault(); // 阻止链接默认行为
  // 执行其他操作
});

阻止上下文菜单（右键菜单）

// 默认情况下，当你右键点击网页时，默认会显示上下文菜单。

// 你可以阻止默认的上下文菜单，并显示自定义上下文菜单。如下

document.addEventListener('contextmenu', function(event) {
      
      
  event.preventDefault(); // 阻止默认的上下文菜单
  // 显示自定义上下文菜单，例如
	  var contextMenu = document.createElement('div');
	  contextMenu.style.position = 'fixed';
	  contextMenu.style.top = `<span class="katex--inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mrow><mi>e</mi><mi>v</mi><mi>e</mi><mi>n</mi><mi>t</mi><mi mathvariant="normal">.</mi><mi>c</mi><mi>l</mi><mi>i</mi><mi>e</mi><mi>n</mi><mi>t</mi><mi>Y</mi></mrow><mi>p</mi><mi>x</mi><mi mathvariant="normal">‘</mi><mo separator="true">;</mo><mi>c</mi><mi>o</mi><mi>n</mi><mi>t</mi><mi>e</mi><mi>x</mi><mi>t</mi><mi>M</mi><mi>e</mi><mi>n</mi><mi>u</mi><mi mathvariant="normal">.</mi><mi>s</mi><mi>t</mi><mi>y</mi><mi>l</mi><mi>e</mi><mi mathvariant="normal">.</mi><mi>l</mi><mi>e</mi><mi>f</mi><mi>t</mi><mo>=</mo><mi mathvariant="normal">‘</mi></mrow><annotation encoding="application/x-tex">{event.clientY}px`;
	  contextMenu.style.left = `</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"><span class="mord"><span class="mord mathnormal">e</span><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="mord mathnormal">e</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mord">.</span><span class="mord mathnormal">c</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">i</span><span class="mord mathnormal">e</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mord mathnormal" style="margin-right:0.22222em;">Y</span></span><span class="mord mathnormal">p</span><span class="mord mathnormal">x</span><span class="mord">‘</span><span class="mpunct">;</span><span class="mspace" style="margin-right:0.1667em;"><span class="mord mathnormal">co</span><span class="mord mathnormal">n</span><span class="mord mathnormal">t</span><span class="mord mathnormal">e</span><span class="mord mathnormal">x</span><span class="mord mathnormal" style="margin-right:0.10903em;">tM</span><span class="mord mathnormal">e</span><span class="mord mathnormal">n</span><span class="mord mathnormal">u</span><span class="mord">.</span><span class="mord mathnormal">s</span><span class="mord mathnormal">t</span><span class="mord mathnormal" style="margin-right:0.03588em;">y</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">e</span><span class="mord">.</span><span class="mord mathnormal" style="margin-right:0.01968em;">l</span><span class="mord mathnormal">e</span><span class="mord mathnormal" style="margin-right:0.10764em;">f</span><span class="mord mathnormal">t</span><span class="mspace" style="margin-right:0.2778em;"><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="base"><span class="strut" style="height:0.6944em;"><span class="mord">‘</span></span></span></span></span>{event.clientX}px`;
	  contextMenu.style.background = '#fff';
	  contextMenu.style.border = '1px solid #ccc';
	  contextMenu.style.padding = '5px';
	  contextMenu.innerHTML = '<ul><li>选项1</li><li>选项2</li><li>选项3</li></ul>';

	  // 将自定义上下文菜单添加到文档中
	  document.body.appendChild(contextMenu);

	  // 点击其他地方时隐藏自定义上下文菜单
	  document.addEventListener('click', function hideContextMenu() {
      
      
	    document.body.removeChild(contextMenu);
	    document.removeEventListener('click', hideContextMenu);
	  });
});
</span></span></span></span></span>

对于a标签来说，它将阻止链接跳转。

阻止事件冒泡
如果不希望事件从子元素传播到父元素，可以使用 event.stopPropagation() 阻止事件冒泡。

element.addEventListener('click', function(event) {
      
      
  event.stopPropagation();  // 阻止事件冒泡
});

‍

事件委托

事件委托是指将事件监听器绑定到父元素，而不是为每个子元素单独绑定。这种技术尤其在处理动态生成的子元素时非常有用，通过事件委托，可以减少事件监听器的数量，提高性能。

例如，使用事件委托为列表中的每个动态生成的项目添加点击事件：

document.querySelector('ul').addEventListener('click', function(event) {
    
    
  if (event.target.tagName === 'LI') {
    
    
    console.log('List item clicked');
  }
});

‍

自定义事件

JavaScript 允许开发者创建和触发自定义事件，使用 CustomEvent 构造函数生成自定义事件，并通过 dispatchEvent 触发该事件：

// 创建自定义事件
let event = new CustomEvent('myCustomEvent', {
    
     detail: {
    
     someData: 'example' } });

// 监听自定义事件
element.addEventListener('myCustomEvent', function(event) {
    
    
  console.log('Custom event triggered:', event.detail.someData);
});

// 触发自定义事件
element.dispatchEvent(event);

‍

总结

事件是前端开发中的基础概念，能够使网页动态响应用户的交互行为。掌握事件的监听、处理、传播机制，理解事件冒泡与捕获、事件委托等技巧，可以帮助开发者更高效地开发用户友好的交互式网页。

‍