Gwt GoogleWave：他们是如何让div可以点击的

当我们在一个移动应用程序中面临GWT性能问题时，我浏览了GoogleWave代码，因为它是用GWT开发的

我认为所有的按钮都是小部件，但是如果你查看firebug生成的HTML，你会发现在可点击的div上没有设置onclick属性。我想知道他们是如何实现它的，因为他们有一个发出click或mousedown事件的元素，而且似乎既不是小部件，也没有注入onclick属性

能够创建这样的组件肯定会使我进一步优化性能

谢谢。

---

注：谷歌不是也打算开放源代码客户端代码吗。我一直没能找到它

我想他们只是在一个.js文件中设置了它。

---

例如，使用带有$（document）.ready（）的jQuery就可以轻松完成。

您不必在HTML上添加

onclick

属性，就可以使其具有onclick处理程序。这是一个非常简单的例子：

<div id="mydiv">Regular old div</div>

---

他们不会直接设置onclick属性，而是在GWT代码中或通过另一个Javascript库进行设置。

您可以使用Javascript将函数挂接到

onclick

事件。下面是一个示例，使用：

---

如果您对优化这方面的性能感兴趣，则可能需要根据您的情况调查事件委派。

将为主体中的每个DOM元素生成一个单击事件。事件从主体向下移动到单击的元素（除非您使用的是Internet Explorer），点击单击的元素，然后返回气泡。可以通过DOM元素属性、javascript中的事件处理程序或任何父级的属性捕获事件（冒泡或捕获事件会触发此事件）

演示了如何在GWT Java应用程序中创建处理程序：

public void anonClickHandlerExample() {
  Button b = new Button("Click Me");
  b.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
      // handle the click event
    }
  });
}

---

这将生成一个HTML元素，并将一个单击处理程序绑定到该元素。但是，在实践中，这与在页面中的现有元素上使用

document.getElementById（'element'）.onclick（）

的结果相同

在GMail的standart视图中查找“旧的”/“新的”导航链接；它们是可点击的，你当然是对的。但是您认为document.getElementById（'element'）.onclick（）是如何工作的，因为按钮没有id，至少在生成的html中是这样的？

$(document).ready(function(){
    $("#div-id").click(function(){
        /* Do something */
    });
});

public void anonClickHandlerExample() {
  Button b = new Button("Click Me");
  b.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
      // handle the click event
    }
  });
}