7cc@はてなブログ

JavaScriptとかとか

トップ > JavaScript > event handler(1) 簡単なイベントハンドラのメモ

event handler(1) 簡単なイベントハンドラのメモ

JavaScript

仕様書 Events - whatwg を読んだメモ
GlobalEventHandlersとかWindowEventHandlersについて

普通の説明はいくつものサイトでされているので省略
DOM event handlers - MDN

シンタックス

obj.on[event] = handler
<element on[event] = handler>

プロパティと属性、設定方法によって違いが出る。それについては次回の記事で

handlerはいずれかの値になる

  • null
  • row-script <body onload="alert(1)">
  • callback object(関数) <body onload="init()">

「event handler」 と 「関数」 はどう違うのか

  1. 上のシンタックスの様に、関数が渡されるとは限らない
  2. arguments[0]に必ずイベントオブジェクトが渡される
document.onclick = function(){ console.log(arguments[0]) } // MouseEvent

普通は function(event){} とパラメータを渡すが、それはarguments[0]を置き換えているだけで、受け取りには必要ない（もっとも、他のパラメータ渡せなくなるのであったほうがいい）。

要約

  • キャプチャリングの無いイベントリスナ
  • 初期値: null
  • 一つだけ設定可
  • return false = event.preventDefault
  • 主体は(a)window以下と(b)その他オブジェクトに分けられる
    • Window, Document, HTMLElement
      • 4つに分類される。詳しくは下記
      • onloadはEvent
    • その他
      • 今の所xhrくらい?
      • onloadはProgressEvent

キャプチャリングの無いイベントリスナとは

バブリングはあるということ。
実行時にはイベントリスナと一緒に処理される。

  • 順序は上書きされても登録された時点での順序になる
  • stopPropagation, stopImmediatePropagationが使える・影響を受ける
p.onclick = function(){ console.log(1) }
p.addEventListener("click", function(){ console.log(2) })

// ↑ ここまでだと、1, 2の順
// ↓ 下があると、3, 2の順になる

p.onclick = function(){ console.log(3) }

することは無いと思うが、HTML属性で設定したイベントハンドラでもバブリングの処理は可能。

Window, Document, HTMLElementのイベントハンドラの分類

設定できるノードでの分類

  1. window, document, element (click)
  2. window, document, bodyとframesetを除くelement (load)
  3. window (afterprint, unload)
  4. document (readystatechange)

インターフェースでの分類

分類 インターフェース 備考
1 GlobalEventHandlers elementはset/getAttributeもok
2 GlobalEventHandlers 同上 + windowイベントはbody, framesetと共通
3 WindowEventHandlers body, framesetと共通
4 特になし 属性不可。document.onreadystatechange のみ

今まで「onclick属性」などと呼ばれてきたものは、
「GlobalEventHandlers.onclick」と呼ばれるようになる。
(というかMDNで呼ばれてた)

属性ではwindowに設定できないので、body, framesetが代わりをする。
window.onload = document.body.onload = <body onload>

イベントリスナでは関係ない。
window.addEventListener("load", foo) ≠ document.body.addEventListener("load", foo)

イベントが起きるかどうか

基本: 初期値がundefinedならそのイベントは起きない
しかし、初期値 nullでも起きないことはある

例)
img onload, script onload -> 意味がある
div onload -> 意味がない

つまり、なにが起きるかはそれぞれのノード次第。

続きはwebで

次回に続く…

主な内容

  • プロパティと属性
  • 互換性