GWT 检测 DOM 更改或修改

Question

我想做什么？

我有一个现有页面（由系统自动生成，我对其没有任何控制），我在其中注入 GWT 代码以修改页面在基于某些列加载后的行为并增强页面的功能。例如，在添加我的 GWT 代码后，table 列之一中的单元格变为可单击，当用户单击它时，会在弹出面板中向用户显示附加信息。一切正常。

这是什么问题？

我在其中注入代码的通用页面已分页 table，一次显示 15 行。现在，当我 load/refresh 页面时，我的 GWT 代码启动并接收特定列中的事件，这会向单元格添加功能（如上所述）。但是，当用户使用左右按钮导航分页结果时，页面不会刷新，因为它是异步调用。新的 15 行集合中的特定列现在没有沉没事件，因为 GWT 代码不知道页面已更改。

我正在尝试找到一种方法来告诉我的 GWT 代码该页面已更改，它应该将事件接收到新 15 行的特定列的单元格，但无法找到任何方法或机制来帮助我捕获一个DOM/Document 更改事件。我尝试这样做但没有帮助：

new ChangeHandler(){

            @Override
            public void onChange(ChangeEvent event) {
                Window.alert("Something Changed");

            }

我可能漏掉了一些非常明显的东西。发布此问题以了解是否有一种简单的方法可以找出 GWT 中的 DOM 更改。已搜索 DOM/Document change/mutation/ 等，但没有成功。

如果有人知道如何检测 GWT 中的 DOM 变化，将不胜感激，否则将继续使用本机变异观察器编写本机代码。

Answer 1

您可以尝试这样的操作：

首先获取输入元素：

InputElement goOn   = DOM.getElementById("IdOfGoOnButton").cast();
InputElement goBack = DOM.getElementById("IdOfGoBackButton").cast();

接下来添加一个原生事件处理程序：

Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
  @Override
  public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
    if (event.getTypeInt() == Event.ONCLICK) {
      if (event.getNativeEvent()
               .getEventTarget() != null) {
        Element as = Element.as(event.getNativeEvent()
                                     .getEventTarget());
        if (as.getTagName()
              .toLowerCase()
              .equals("input")) {
          InputElement clickedElement = as.cast();
          if (clickedElement.getId().equals(goOn.getId()) ||
              clickedElement.getId().equals(goBack.getId())) {
            // one of the paging button is pressed
          }
        }
      }
    }
  }
});

希望对您有所帮助。

GWT 检测 DOM 更改或修改

GWT Detect DOM changes or modifications

gwt

dom

mutation