js动态添加onload、onresize、onscroll事件(另类方法)

在JavaScript中，通常我们会直接为元素或窗口对象添加事件监听器来绑定`onload`、`onresize`和`onscroll`等事件。但如果你想要一种“另类”的方法来动态添加这些事件，一种方式是通过修改元素的`on`属性或者使用`addEventListener`方法的变种（尽管后者不是传统意义上的“另类”）。不过，这里我将展示一个使用`Object.defineProperty`来动态地、更“另类”地添加这些事件监听器的示例。

请注意，这种方法更多地是为了展示JavaScript的灵活性，而不是在性能或可读性上优于标准方法。

// 定义一个函数来“另类”地添加事件监听器
function addEventInUnusualWay(obj, eventType, handler) {
    // 检查事件类型是否是我们关心的类型之一
    if (!['load', 'resize', 'scroll'].includes(eventType)) {
        console.error('Unsupported event type');
        return;
    }

    // 使用Object.defineProperty来“劫持”事件属性
    Object.defineProperty(obj, `on${eventType}`, {
        get: function() {
            // 如果当前没有设置任何事件处理函数，则直接返回undefined
            // 否则，我们可以选择在这里执行一些额外的逻辑，比如记录事件被访问等
            return this._originalHandlers[`on${eventType}`] || undefined;
        },
        set: function(newValue) {
            // 如果已经有一个原始的处理函数，我们不想丢失它
            // 所以我们将它保存在一个私有属性中
            if (this._originalHandlers === undefined) {
                this._originalHandlers = {};
            }
            this._originalHandlers[`on${eventType}`] = newValue;

            // 现在我们添加我们自己的事件监听器
            // 注意：对于window的load事件，你可能需要确保这段代码在DOM加载前执行
            // 或者检查document.readyState
            obj.addEventListener(eventType, handler);

            // 如果用户后来尝试覆盖这个事件处理函数，我们不会阻止
            // 但我们的监听器仍然会存在
        },
        enumerable: true,
        configurable: true
    });
}

// 使用示例
window.onload = function() {
    console.log('Window loaded traditionally.');
};

// 使用我们的“另类”方法来添加resize和scroll事件的监听器
addEventInUnusualWay(window, 'resize', function() {
    console.log('Window resized!');
});

addEventInUnusualWay(window, 'scroll', function() {
    console.log('Window scrolled!');
});

// 注意：直接设置window.onresize或window.onscroll将不会触发我们的监听器
// 但它们将覆盖我们保存在_originalHandlers中的任何原始处理函数（如果有的话）

请注意，这个示例中的`addEventInUnusualWay`函数实际上并没有完全按照传统的`on`属性工作，因为它不会完全替换现有的处理函数，而是将原始的处理函数保存起来，并额外添加一个自己的监听器。此外，直接通过`window.onresize = ...`或`window.onscroll = ...`设置的处理函数将不会触发通过`addEventInUnusualWay`添加的监听器，但会覆盖保存在`_originalHandlers`中的任何值。

这种方法主要用于演示目的，并不推荐在生产环境中使用，因为它可能会引入难以追踪的bug和混淆。在大多数情况下，直接使用`addEventListener`是更简单、更直接且更可靠的方法。