волна Google: как они делали divs кликабельными

Question

Поскольку мы сталкиваемся с проблемами производительности GWT в мобильном приложении, я заглянул в код Google Wave, так как он разработан с GWT.

Я думал, что все кнопки есть виджеты, но если вы посмотрите на сгенерированный HTML с помощью firebug, вы не увидите атрибута onclick, установленного на интерактивных div-элементах.Интересно, как они достигают этого, имея элемент, который выдает события click или mousedown и, по-видимому, не является виджетом и не внедряется с атрибутом onclick.

Возможность создавать такие компоненты, несомненно, сделала бы меня еще одним шагом к оптимизации производительности.

Спасибо.PS: разве Google не собирается открывать исходный код клиента тоже?Не смогли найти его.

Answer 1

Вам не нужно помещать атрибут onclick в HTML, чтобы он имел обработчик onclick.Это очень простой пример:

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

Затем в скрипте:

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

Они не установят свойство onclick напрямую, оно будет установлено в коде GWT или черездругая библиотека Javascript.

Answer 2

Документация GWT показывает, как создавать обработчики в приложении 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() для существующего элемента на вашей странице.

Answer 3

Событие щелчка генерируется для каждого элемента DOM в теле. Событие перемещается от Тела вниз к элементу, по которому щелкнули (если вы не используете Internet Explorer), попадет по элементу, по которому щелкнули, и затем снова всплывет. Событие может быть захвачено с помощью атрибутов элемента DOM, обработчиков событий в javascript или атрибутов на любом из родительских уровней (событие пузыря или захвата вызывает это).

Answer 4

Если вы заинтересованы в оптимизации производительности, вам может потребоваться изучить делегирование событий в зависимости от вашей ситуации.

Answer 5

Вы можете привязать функции к событию onclick, используя JavaScript. Вот пример использования jQuery :

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

Answer 6

Я думаю, они только что установили его в файл .js. Это легко сделать, скажем, с помощью jQuery, например, с помощью $ (document) .ready ().