feat: 重复绑定相同事件的执行机制

src/router/modules/demo.ts

@@ -88,6 +88,10 @@ const titleArr = [
         key: 'getSymbolObject',
         title: '获取对象中属性为Symbol类型的方法',
     },
+    {
+        key: 'rebindEvent',
+        title: '重复绑定相同事件的执行机制',
+    },
 ];
 
 // @/views/demo/**/*.vue

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>