面试题：JavaScript函数与事件处理结合下的跨浏览器兼容性及内存管理

1. 事件处理函数绑定的兼容性问题及解决方案

IE 与标准浏览器差异：
- 问题：在标准浏览器（Chrome、Firefox、Safari 等）中，使用 addEventListener 方法来绑定事件处理函数；而在 IE8 及以下版本中，使用 attachEvent 方法。这两种方法的参数顺序和 this 指向有所不同。addEventListener 的第一个参数是事件类型（如 'click'），第二个参数是事件处理函数，第三个参数用于指定事件捕获或冒泡阶段（可选，默认为 false 表示冒泡阶段）。attachEvent 的第一个参数是 'on' 加上事件类型（如 'onclick'），第二个参数是事件处理函数，并且在 attachEvent 中 this 指向全局对象 window，而不是触发事件的元素。
- 解决方案：可以封装一个跨浏览器的事件绑定函数，例如：

function addEvent(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, function () {
            return handler.call(element);
        });
    } else {
        element['on' + type] = handler;
    }
}

事件对象获取的差异：
- 问题：在标准浏览器中，事件对象会作为参数传递给事件处理函数；而在 IE8 及以下版本中，需要通过 window.event 获取事件对象。
- 解决方案：在事件处理函数中，可以这样获取事件对象：

function myHandler(event) {
    event = event || window.event;
    // 后续使用 event 对象
}

2. 内存管理及避免内存泄漏问题

动态添加和移除事件处理函数时的内存回收：
- 问题：如果在动态添加事件处理函数后，没有正确移除，可能会导致内存泄漏。例如，在一个元素上添加了事件处理函数，当该元素从 DOM 中移除时，如果事件处理函数仍然持有对该元素的引用，垃圾回收机制就无法回收该元素占用的内存。
- 解决方案：
  - 确保移除事件处理函数：在移除元素之前，先移除其绑定的事件处理函数。同样可以封装一个跨浏览器的事件移除函数：

function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent('on' + type, handler);
    } else {
        element['on' + type] = null;
    }
}

    - **使用弱引用**：在现代 JavaScript 中，可以使用 `WeakMap` 来管理事件处理函数。`WeakMap` 的键是弱引用的，当键（例如 DOM 元素）不再有其他引用时，垃圾回收机制可以回收它。例如：

const eventMap = new WeakMap();
function addEventWithWeakMap(element, type, handler) {
    if (!eventMap.has(element)) {
        eventMap.set(element, new Map());
    }
    const typeMap = eventMap.get(element);
    if (!typeMap.has(type)) {
        typeMap.set(type, []);
    }
    const handlers = typeMap.get(type);
    handlers.push(handler);
    addEvent(element, type, function (event) {
        handlers.forEach(h => h(event));
    });
}

function removeEventWithWeakMap(element, type, handler) {
    if (eventMap.has(element)) {
        const typeMap = eventMap.get(element);
        if (typeMap.has(type)) {
            const handlers = typeMap.get(type);
            const index = handlers.indexOf(handler);
            if (index!== -1) {
                handlers.splice(index, 1);
            }
        }
    }
}

这样，当 element 从 DOM 中移除且没有其他引用时，WeakMap 中的相关记录也不会阻止其被垃圾回收。 - 避免循环引用：确保事件处理函数中不会形成循环引用。例如，避免在事件处理函数中创建一个闭包，该闭包持有对外部对象（如 DOM 元素）的引用，而外部对象又持有对事件处理函数的引用。如果无法避免，可以在适当的时候手动打破循环引用，例如在移除元素或事件处理函数时，将相关引用设置为 null。

星途面试题库

面试题：JavaScript函数与事件处理结合下的跨浏览器兼容性及内存管理

知识考点

面试题答案

1. 事件处理函数绑定的兼容性问题及解决方案

2. 内存管理及避免内存泄漏问题