Question

如何重构以下代码片段以使用jQuery。

  window.onload = function () {
        if (window.addEventListener) {
            window.addEventListener("message", doSomething, false);
        }
        else {
            if (window.attachEvent) {
                window.attachEvent("onmessage", doSomething);
            }
        }
    }

Answer 1

在jQuery中，你可以这样做：

$(window).on("message", doSomething);

这会将"message"事件的事件处理程序附加到窗口对象。

仅供参考，我们无需等待window.onload只是将事件处理程序附加到window对象，因为它已经存在，因此无需等待。 / p>

如果您确实需要等待其他原因，可以将其置于：

之内

// wait for all document resources to load
$(window).load(function() {
    // code here
});

或

// wait for DOM to be loaded
$(document).ready(function() {
    // code here
});

取决于你需要等待什么。

Answer 2

如果'onmessage'和'message'是特定于window对象的事件，您可以将窗口包装在jQuery包装器中$(window)

然后您可以使用jQuery的事件系统将这些事件与.on()

绑定

所以它看起来像这样：

$(window).on('message', function(){ // do something });
$(window).on('onmessage', function(){ // do something });

您可以阅读有关.on() at the jQuery API

的更多信息

有些人会告诉你使用bind，但是来自docs：

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind（）方法用于将事件处理程序直接附加到元素。

因此，根据您的jQuery版本，您可以相应地使用on()或bind()。

希望有所帮助！

如何将此eventlistener转换为jQuery

2 个答案: