web-事件概述（创建和触发事件）_dispatchevent-优快云博客

文章目录

web事件介绍
web事件参考
- 事件索引
- 事件列表
web事件处理器
创建和触发事件

web事件介绍

事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动，即运行一些代码。

事件的冒泡机制，委托机制等详细信息可以参照：https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events

web事件参考

每个事件都使用继承自 Event 接口的对象来表示，可以包括额外的自定义成员属性及函数，以获取事件发生时相关的更多信息。

事件索引

可以触发事件的工具有很多，比如我们常见的鼠标、键盘、支付、网络连接、加载卸载文档等。下表列出几个常见的事件索引，更多信息可以查看https://developer.mozilla.org/zh-CN/docs/Web/Events

事件索引	可以触发的行为
动画	动画开始播放：animationstart 动画播放结束：animationend 动画播放出现意外：animationcancel
剪切板	复制：copy 剪切：cut 粘贴：paste
拖拽	drag：在用户拖动元素或选择的文本时每几百毫秒触发一次。 dragend：在拖动操作结束（通过释放鼠标按钮或按下退出键））时触发。 dragenter：在拖动的元素或选择的文本进入有效的放置目标时触发。 dragleave、dragover、dragstart、drop
全屏事件	fullscreenchange：进入或退出全屏的时候触发 fullscreenerror：进入或退出全屏触发错误时候触发
键盘事件	keydown ：在某个键被按下时触发 keyup：在释放按键时触发
加载和卸载事件	DOMContentLoaded：在文档完全加载并解析后触发，无需等待样式表、图像和子框架完成加载。 readystatechange：在文档的 readyState 属性发生变化时触发
选择事件	selectionchange：在文档中的选中的文本发生改变时触发。
触摸事件	touchcancel：一个或多个触摸点中断的时候触发 touchend：在从接触面移除一个或多个接触点时触发。 touchmove：在一个或多个接触点沿接触面移动时触发。 touchstart：在向接触面放置一个或多个接触点时触发。
过渡事件	transitioncancel ：在 CSS 过渡取消时触发。 transitionend：在 CSS 过渡完成时触发。 transitionrun ：在 CSS 过渡第一次创建时触发。 transitionstart ：在 CSS 过渡实际开始时触发。
指针事件	…

事件列表

所有事件列表参照：
https://developer.mozilla.org/zh-CN/docs/Web/Events

web事件处理器

两种方法：

使用 onevent 属性
以事件名称加前缀“on”命名的属性添加相关处理器代码：

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;

使用addEventListener
在元素上设置事件处理器的最灵活的方法是使用 EventTarget.addEventListener 方法。这种方法允许为一个元素分配多个监听器，并在需要时删除监听器（使用 EventTarget.removeEventListener 方法）。

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);

同时移除多个事件处理器
事件监听器的一个显著特点是可以使用终止信号同时清理多个事件处理器。

具体做法是将相同的 AbortSignal 传递给所有你想要可以一起移除的事件处理器的 addEventListener() 调用。然后，你可以在拥有AbortSignal（终止信号）的控制器上调用 abort()，这样就能移除通过该信号添加的所有事件处理器。
eg：

const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal },
); // 将 AbortSignal 传递给该处理器

controller.abort(); // 移除与此控制器关联的任何/所有事件处理器

创建和触发事件

补充：dispatchEvent

dispatchEvent的作用是派发事件，简单来说就是以代码的方式触发某个事件，如触发点击事件、移动事件。
dispatchEvent() 方法会触发目标元素的一个事件，并以合适的顺序调用该事件的事件处理器。
在 dispatchEvent() 触发之后，所有监听该事件的事件处理器执行完成之后dispatchEvent()才会返回一个结果。
返回值：当 event 可被取消时（cancelable 值为 true），且 event 中有事件处理程序调用了 preventDefault() 方法时，返回 false。否则，返回 true。

dispatchEvent(event)

event: 被派发的 Event。

eg：

  <body>
    <button id="myButton">click me</button>
  </body>
  <script>
    // 创建一个点击事件
    var event = new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
      view: window,
    });

    // 假设我们有一个名为 "myButton" 的按钮
    var btn = document.getElementById("myButton");
    btn.addEventListener("click", () => {
      console.log("不小心被点击了");
    });

    // 触发这个点击事件
    btn.dispatchEvent(event);
  </script>

不执行任何操作，控制台输出

不小心被点击了

我们使用dispatchEvent触发自定义事件

创建自定义事件

使用 Event 构造函数创建事件

// 创建自定义事件
const event = new Event("build");

// 为dom元素添加该事件的处理器
elem.addEventListener(
  "build",
  (e) => {
    /* … */
  },
  false,
);

// 触发该事件
elem.dispatchEvent(event);

创建带数据的自定义事件——customEvent

要向事件对象添加更多数据，可以使用 CustomEvent 创建事件，使用detail 属性传递自定义数据。
CustomEvent()构造函数：new CustomEvent(type, options?)

type: 自定义事件的名称，事件名称区分大小写
options：是可选项。可选值有Event()中定义的属性，此外还有一个detail属性
- bubbles，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
- cancelable，可选，Boolean类型，默认值为 false，表示该事件能否被取消。
- composed，可选，Boolean类型，默认值为 false，指示事件是否会在影子 DOM 根节点之外触发侦听器。
- detail：可选，与事件相关联的事件相关值。处理器可使用 CustomEvent.detail 属性获取该值。默认为 null。

const event = new CustomEvent("build", { detail: elem.dataset.time });

设置的数据可以在自定义事件的回调函数的参数中读取：

function eventHandler(e) {
  console.log(`The time is: ${e.detail}`);
}

使自定义事件可以向上冒泡

使用 CustomEvent 创建事件，同时定义bubbles: true属性使自定义事件冒泡。

<body>
 	<form>
	  <textarea></textarea>
	</form>
</body>
<script>
	const form = document.querySelector("form");
	const textarea = document.querySelector("textarea");
	
	// 创建一个新事件，允许冒泡，并提供要传递给“detail”属性的任何数据
	const eventAwesome = new CustomEvent("awesome", {
	  bubbles: true,
	  detail: { text: () => textarea.value },
	});
	
	// 表单（form）元素监听自定义的“awesome”事件，然后在控制台打印传递的 text() 方法的输出
	form.addEventListener("awesome", (e) => console.log(e.detail.text()));
	
	// 当用户输入时，表单中的文本区域会分派/触发事件，并以自身为事件的起点
	textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));
</script>

效果是，输入内容之后，控制台输出输入的内容。这个控制台的输出内容是触发了父组件form表单触发的。

动态创建自定义事件

动态创建自定义事件依据的原理是元素可以监听尚未创建的事件。

<body>
	<form>
	  <textarea></textarea>
	</form>
</body>
<script>
	const form = document.querySelector("form");
	const textarea = document.querySelector("textarea");
	// 监听自定义事件
	form.addEventListener("awesome", (e) => console.log(e.detail.text()));
	
	textarea.addEventListener("input", function () {
	  // 动态创建并分派/触发一个事件
	  // 注意：我们还可以使用“函数表达式”（而不是“箭头函数表达式”），这样“this”将表示该元素
	  this.dispatchEvent(
	    new CustomEvent("awesome", {
	      bubbles: true,
	      detail: { text: () => textarea.value },
	    }),
	  );
	});
</script>

触发内置事件

一般情况下内置时间都有对应的行为事件，如用户点击，滚轮滚动。但是也可以通过代码直接触发，使用dispathEvent。

function simulateClick() {
  // 定义click事件
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  // 触发click事件
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // 处理器调用了 preventDefault。
    alert("cancelled");
  } else {
    // 没有处理器调用 preventDefault。
    alert("not cancelled");
  }
}