如何利用 Object.assign() 实现对原始事件监听对象（Event Listeners）的浅层迁移-js教程-PHP中文网

Object.assign() 无法迁移事件监听器，因其仅复制可枚举自有属性，而addEventListener绑定的监听器由浏览器内部维护、不暴露为对象属性；可行方式是显式重绑定、事件委托或封装行为逻辑。

如何利用 object.assign() 实现对原始事件监听对象（event listeners）的浅层迁移

Object.assign() 本身不能直接迁移事件监听器，因为它只复制对象的可枚举自有属性，而事件监听器（如通过 addEventListener 绑定的函数）并不作为属性存储在 DOM 元素上，也不在元素对象的自有属性中暴露。试图用 Object.assign(target, source) “拷贝”监听器会失败——监听器不会被复制过去。

为什么 Object.assign() 对事件监听器无效

DOM 元素上的事件监听器由浏览器内部维护，不反映为 JavaScript 对象的属性。例如：

const btn = document.getElementById('myBtn');
btn.addEventListener('click', () => console.log('clicked'));
console.log(btn.onclick); // null（除非用了 onclick 属性）
console.log(Object.keys(btn)); // 很少包含事件相关键，且不包括 addEventListener 绑定的监听器

因此：

Object.assign() 只操作对象的「属性键值对」，无法触及底层事件注册表
监听器不是「可枚举自有属性」，不会被遍历或复制
即使手动把回调函数赋给某个属性（如 btn.clickHandler = fn），那也只是数据，不是已激活的监听器

真正可行的“浅层迁移”方式

所谓“迁移事件监听器”，实际是指：将源元素（A）上绑定的所有事件监听逻辑，以相同类型、相同回调（或包装后）重新绑定到目标元素（B）上。这需主动读取和重绑定，而非靠对象拷贝。常见做法如下：

显式记录监听器：在绑定时自行维护映射表，例如：

const listeners = new WeakMap();<br>listeners.set(btn, { click: handler1, mouseover: handler2 });<br>// 迁移时遍历 listeners.get(btn) 并重新 addEventListener

封装可复用的绑定函数：把监听逻辑抽离为独立函数或配置对象，便于多处调用：

const buttonBehaviors = {<br>  click: () => api.submit(),<br>  keydown: (e) => e.key === 'Enter' && api.submit()<br>};<br>Object.keys(buttonBehaviors).forEach(type =><br>  newBtn.addEventListener(type, buttonBehaviors[type])<br>);

使用事件委托替代逐个迁移：把监听器统一挂在父容器，利用事件冒泡处理子元素，天然规避迁移问题：
```
parent.addEventListener('click', e => {<br>  if (e.target.matches('.old-btn, .new-btn')) handleAction();<br>});
```

如果坚持用 Object.assign()，它能帮什么忙？

它可在迁移过程中辅助处理「与监听器配套的配置对象」，比如事件选项、上下文参数、开关状态等非函数数据：

const defaultOptions = { capture: false, passive: true };
const customOptions = { passive: false };

// 合并监听选项（浅合并）
const finalOptions = Object.assign({}, defaultOptions, customOptions);
// → { capture: false, passive: false }

element.addEventListener('touchstart', handler, finalOptions);

这类用法是合理的，但注意：它迁移的是「配置」，不是监听器本身。