GWT结合elemental2开发时如何正确调用onload事件监听器？

该问题通常由以下几个常见原因导致：

• 事件绑定时机晚于元素load事件触发时机：你为元素绑定load事件监听时，对应元素的资源已经加载完成，load事件已经被触发过，自然不会再执行回调逻辑，该场景常见于动态创建的<img>、<script>、<iframe>等带外部资源的元素、或是监听页面全局加载事件的场景。
• 绑定事件的元素不支持load事件：只有window、document、以及需要加载外部资源的元素（比如图片、脚本、样式表、iframe等）才会触发load事件，普通DOM节点（比如<div>、<p>等）无该事件，绑定后不会生效。
• 代码层面的错误：比如导入了非elemental2.dom包的EventListener、匿名内部类实现handleEvent时方法签名和接口要求不匹配（elemental2的EventListener.handleEvent需要返回Object类型，而非void），导致事件绑定逻辑本身执行失败，回调自然不会触发。

场景1：监听动态资源元素的load事件 #

动态创建带资源的元素时，必须先绑定事件，再设置资源地址、将元素插入DOM，避免错过事件触发时机，同时确保方法签名符合接口要求，示例代码如下：

import elemental2.dom.HTMLImageElement;
import elemental2.dom.DomGlobal;
import elemental2.dom.EventListener;
import elemental2.dom.Event;

// 1. 创建元素实例
HTMLImageElement img = DomGlobal.document.createElement("img");
// 2. 先绑定load事件监听
img.addEventListener("load", new EventListener() {
    @Override
    public Object handleEvent(Event evt) {
        DomGlobal.alert("yes i from onload event...");
        return null; // 必须按接口要求返回Object类型，此处返回null即可
    }
});
// 3. 最后设置资源地址、插入DOM
img.src = "你的资源地址";
DomGlobal.document.body.appendChild(img);

场景2：监听页面全局加载完成事件 #

如果需要监听整个页面资源加载完成，需要将事件绑定到window对象上，同时需要兼容代码执行时页面已经加载完成的情况，避免漏触发：

import elemental2.dom.DomGlobal;

if (DomGlobal.document.readyState.equals("complete")) {
    // 页面已经加载完成，直接执行回调逻辑
    DomGlobal.alert("页面已加载完成");
} else {
    // 页面未加载完成，绑定load事件
    DomGlobal.window.addEventListener("load", evt -> {
        DomGlobal.alert("页面加载完成触发");
        return null;
    });
}

内容的提问来源于stack exchange，提问作者Thangaraj