イベント

JavaScript

勉強会用JavaScriptメモ

イベントの登録方法は以下

  • HTMLの属性として記述
<button onclick="alert('Hello')">Hello</button>

メリット

    • DOMの特定や読み込みタイミングなどを気にしないでよい。

デメリット

    • コンテンツであるhtmlを挙動を示すコードが侵食する。
  • DOMエレメントのon*メソッドに登録
<button id="btnHello">Hello</button>
<script>
document.getElementById('btnHello').onclick = function () {alert('Hello');};
</script>

メリット

    • 比較的ブラウザ間の非互換性を気にしなくて良い。

デメリット

    • 既存の動作があった場合それを上書きしてしまう。
  • DOMエレメントのaddEventListenerを使用して関数を登録
<button id="btnHello">Hello</button>
<script>
document.getElementById('btnHello').addEventListener(
  'click', function () {alert('Hello');}, false);
</script>

メリット

    • 複数の関数を登録できる。
    • bubblingを制御できる。

デメリット

    • ブラウザ間で互換性がない。