数年前に作成した Web サイトのコードを書き直していますが、要素のクリック イベントを処理する最も効率的な方法は何でしょうか?
それらを編集するためのリンクを含むアイテムのリストがあり、それらはすべてonclick="..."
HTML 属性で書かれています。その方が良いですか、それとも使用$.bind()
またはaddEventListener
処理する必要がありますか? ベストプラクティスは何ですか?
数年前に作成した Web サイトのコードを書き直していますが、要素のクリック イベントを処理する最も効率的な方法は何でしょうか?
それらを編集するためのリンクを含むアイテムのリストがあり、それらはすべてonclick="..."
HTML 属性で書かれています。その方が良いですか、それとも使用$.bind()
またはaddEventListener
処理する必要がありますか? ベストプラクティスは何ですか?
unobtrusive javascriptと呼ばれるものを利用することがベストプラクティスと考えられています。これが意味することは、HTML のレイアウトを要素の動作から分離することです。したがって、要素の構造と動作を混同する onclick 属性を使用する代わりに、DOM 構造をマークアップでレイアウトし、JavaScript を介してイベント ハンドラーをアタッチします。
これが意味することは、次のように、アタッチされたイベント ハンドラーに JavaScript を使用することがベスト プラクティスと見なされることです。
<html>
<script>
... bind event handlers to your DOM and set behaviours here
</script>
<body>
.... layout your DOM here
</body>
<html>
これには、長期的なコードの保守性と拡張性に利点があります。このアプローチは、jQuery などの JavaScript ライブラリで非常にうまく機能します。
パフォーマンスに関しては、インテリジェントなキャッシング戦略を使用して控えめな JavaScript アプローチを介してパフォーマンスを向上させることができる場合があります。
邪魔にならない JavaScript の詳細については、こちらを参照してください。
addEventListener
または、jQueryバージョンon
\bind
は、視覚的な部分-HTMLを機能的な部分-javascriptから分離するためのベストプラクティスです。
懸念の分離。
コードがすでに書かれている場合、私はそれを変更しません、それはそれほど重要ではありません。
多くの人は、onclick
「別のonclickイベントを追加したい場合はどうなるか」という理由で、この使用を思いとどまらせるでしょう。-個人的にはこの問題は一度もありませんが、ある程度は理解できます。
click
単一のイベント以外の目的でリンクを使用していない場合は、まったく問題ありませんonclick
。ただし、防弾にしたい場合は、おそらく必要ですaddEventListener
。私は実際に、イベントを追跡し、ブラウザーの不整合を処理する(たとえば、持ち込む)独自の//トリオの関数を持っており、これは非常にうまく機能しますaddEvent
。fireEvent
removeEvent
window.event