From 2da3ea48b7570effd1a884d1adf91005ddc8c33f Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Mon, 12 May 2025 17:47:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E5=A4=8D=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E7=9B=B8=E5=90=8C=E4=BA=8B=E4=BB=B6=E7=9A=84=E6=89=A7=E8=A1=8C?=
 =?UTF-8?q?=E6=9C=BA=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/demo.ts     |  4 +++
 src/views/demo/rebindEvent.vue | 55 ++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/views/demo/rebindEvent.vue

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index fe1a96b..cd5cafb 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -88,6 +88,10 @@ const titleArr = [
         key: 'getSymbolObject',
         title: '获取对象中属性为Symbol类型的方法',
     },
+    {
+        key: 'rebindEvent',
+        title: '重复绑定相同事件的执行机制',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/views/demo/rebindEvent.vue b/src/views/demo/rebindEvent.vue
new file mode 100644
index 0000000..ea4cff5
--- /dev/null
+++ b/src/views/demo/rebindEvent.vue
@@ -0,0 +1,55 @@
+<template>
+    <base-container>
+        <h2 class="pt-5 pb-5">重复绑定相同事件的执行机制</h2>
+        <div
+            ref="divDom"
+            class="mb-5"
+        >
+            我是绑定事件的dom
+        </div>
+        <div>
+            <el-button
+                type="primary"
+                style="width: 200px"
+                @click="handleClick(handleDomClick1)"
+                >点击我绑定方法一</el-button
+            >
+            <el-button
+                type="primary"
+                style="width: 200px"
+                @click="handleClick(handleDomClick2)"
+                >点击我绑定方法二</el-button
+            >
+        </div>
+        <pre class="mt-5">
+经测试，绑定相同方法的执行机制是：
+当一个事件被绑定到一个元素上时，再次绑定相同的方法，点击绑定元素只会执行一次绑定的方法。
+
+绑定不同方法的执行机制是：
+当一个事件被绑定到一个元素上时，绑定不同的方法，点击绑定元素会执行所有绑定的方法。
+        </pre>
+    </base-container>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+defineOptions({
+    name: 'RebindEvent',
+});
+
+const divDom = ref(null);
+
+const handleDomClick1 = () => {
+    console.log('我是dom被点击了1');
+};
+
+const handleDomClick2 = () => {
+    console.log('我是dom被点击了2');
+};
+const handleClick = (fnName) => {
+    console.log(fnName);
+    divDom.value.addEventListener('click', fnName);
+};
+</script>
+
+<style lang="scss" scoped></style>