GWT Node 或 Element 监听 onAttach 事件

Question

有没有办法在 GWT 节点中处理某种 onAttach 事件？我想我可以这样做：

Node myDiv = DOM.createDiv();
Magic.setOnAttachEventListener(myDiv, new EventListener() {
  @Override
  public void onEvent(Event event) {
    // ...
  }
}

当我做这样的事情时应该调用处理程序，

parent.appendChild(myDiv);

鉴于 parent 本身已附加，即显示在当前 window 中。

Answer 1

您可以使用 SimplePanel 或 HTMLPanel，因为它们的内容都使用 DIV。

在面板上您可以调用 addAttachHandler 方法。

如果您需要 Element，您可以在面板上调用 getElement() 方法。

此方法仅在您将 myDiv 附加为面板时有效，而不是

parent.appendChild(myDiv);

你应该这样做

HTMLPanel.wrap(parent).add(myDiv);

这是一个示例代码：

    Element parent = RootPanel.getBodyElement();
    SimplePanel myDiv = new SimplePanel();

    // use it as Panel
    myDiv.add(new Label("Hello!"));

    // or use it as an element
    myDiv.getElement().setInnerText("Hello 2!");

    myDiv.addAttachHandler(new Handler() {
        @Override
        public void onAttachOrDetach(AttachEvent event) {
            Window.alert("Attached");
        }
    });

//  parent.appendChild(myDiv.getElement());     // this will not fire the AttachEvent
    HTMLPanel.wrap(parent).add(myDiv);          // this will fire the AttachEvent

Answer 2

GWT 中的所有 Widget 都已经实现了 HasAttachHandlers 接口。如果您需要此功能，最好使用 Widget 而不是 Node。

Answer 3

我 post 我的第二个答案，因为现在我知道您无法更改将 DIV 添加到父项的方式。

经过一番搜索，我找到了 Mutation events。它们允许您收听 DOMNodeInserted 事件：

JS:

myDiv.addEventListener("DOMNodeInserted", function (ev) {
    alert('added');
}, false);

在 GWT 中你需要使用 JSNI 方法：

private native void addListener(Element elem) /*-{
    elem.addEventListener("DOMNodeInserted", function (ev) {
        $wnd.alert('added');
    }, false);
}-*/;

它可以工作，但是...它已被弃用。您应该改用 MutationObserver。

不幸的是MutationObserver 没有要观察的 NodeInserted 事件。我认为 subtree 突变观察可以完成这项工作，但它对我不起作用。解决方案是在父级上观察 childList 突变：

JS:

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        alert(mutation.type);
    });    
});

// configuration of the observer:
var config = {
    childList: true
};

// pass in the target node, as well as the observer options
observer.observe(elem, config);

同样，对于 GWT，您需要将其包装在 JSNI 方法中（您知道如何）。

观察者回调中的mutation参数是一个MutationRecord对象。

因此，如果您可以获得父级，请在其上使用 MutationObserver 并观察 childList 突变。如果没有，请尝试使用已弃用的 Mutation 事件。

我知道这不是纯粹的 GWT 解决方案，但您可以使用 GWT 方法来处理事件或突变。您只需要像这样从 JSNI 调用 GWT 方法：

[instance-expr.]@class-name::method-name(param-signature)(arguments)

您将在 GWT documentation.

中找到所有 JSNI 信息

Answer 4

还有 "polling" 替代方案，它可能不是很有效但更简单，请参阅。

GWT Node 或 Element 监听 onAttach 事件

GWT Node or Element listen to onAttach event

java

gwt