google wave: how did they make divs clickable

Question

As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.

I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.

Being able to create such components would surely take me one step further to optimizing performance.

Thanks. ps: wasnt google going to open source client code too. Have not been able to find it.

Answer 1

The GWT documentation shows how to create handlers within a GWT Java app:

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

This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.

Answer 2

You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:

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

Then in script:

document.getElementById('mydiv').onclick = function() { 
    alert('hello!');
}

They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.

Answer 3

You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:

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

Answer 4

If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.

Answer 5

A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).

Answer 6

I'd imagine they've just set it in a .js file. Easily done with say jQuery with $(document).ready() for example.