Google Wave:どのようにしてDivをクリック可能にしましたか
-
29-09-2019 - |
質問
モバイルアプリでGWTパフォーマンスの問題に直面しているので、GWTで開発されて以来、Google Waveコードを覗き込みました。
すべてのボタンにはウィジェットがあると思いましたが、FireBugを使用して生成されたHTMLを調べると、クリック可能なDivに設定されていません。イベントをクリックしたり、マウスダウンしたイベントを問題にしたり、ウィジェットでもオンクリック属性で注入されたりしない要素を持っていることをどのように達成したのだろうか。
このようなコンポーネントを作成できることは、パフォーマンスを最適化するためにさらに一歩進んでくれるでしょう。
ありがとう。 PS:Googleもクライアントコードをオープンするつもりはありませんでした。それを見つけることができませんでした。
解決
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()
ページの既存の要素。
他のヒント
あなたは置く必要はありません onclick
HTMLの属性を使用して、オンクリックハンドラーを備えています。これは非常に簡単な例です。
<div id="mydiv">Regular old div</div>
次にスクリプトで:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
OnClickプロパティを直接設定することはありません。GWTコードまたは別のJavaScriptライブラリを介して設定されていました。
関数をにフックすることができます onclick
JavaScriptを使用したイベント。これが使用の例です jquery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
この周りのパフォーマンスを最適化することに興味がある場合は、状況に応じて、イベント委任を調査する必要がある場合があります。
ボディ内のすべてのDOM要素に対してクリックイベントが生成されます。イベントはボディからクリックされた要素まで移動します(インターネットエクスプローラーを使用している場合を除く)、クリックされた要素にヒットしてから、バブルアップします。このイベントは、DOM要素属性、JavaScriptのイベントハンドラー、または親レベルのいずれかの属性(泡立てまたはキャプチャイベントがこれをトリガーする)を介してキャプチャできます。
彼らはそれを.jsファイルに設定しただけだと思います。たとえば、$(document).ready()を備えたjqueryを簡単に実行できます。