LOG

JavaScriptのイベント

イベントの登録や発火などイベント周りの処理のメモ

イベントの登録

イベントの登録には「addEventListener」を利用する

div1 = document.getElementById('div1')
div2 = document.getElementById('div2')
div3 = document.getElementById('div3')

handle = (e)->
    console.log e.eventPhase,this.firstChild.nodeValue
    return

div1.addEventListener('click',handle,true)
div2.addEventListener('click',handle,true)
div3.addEventListener('click',handle,true)

# useCaptureをtrueにしているのでdiv3をクリックすると
# 1 "1"
# 1 "2"
# 2 "3"
# となる。
# eventPhaseで得られる値はフェーズの種類になっており、それぞれ
# 1 | capture
# 2 | target
# 3 | bubbling

デモ

イベントの削除

イベントの削除には「removeEventListener」を利用する

# 以下のようにすると1度だけ実行する処理が書ける

div1 = document.getElementById('div1')

handle = (e)->
    console.log "clicked"
    e.currentTarget.removeEventListener('click',handle)
    return

div1.addEventListener('click',handle)

デモ

イベントの発火

スクリプトからイベントを発生(発火)には「dispatchEvent」を利用する

div1 = document.getElementById('div1')

handle = (e)->
    console.log "clicked"
    e.currentTarget.removeEventListener('click',handle)
    return

div1.addEventListener('click',handle)
div1.dispatchEvent(new Event('click'))
# マウスイベントの場合、MouseEventというオブジェクトがあるので、
# div1.dispatchEvent(new MouseEvent('click')) でもOK

デモ

カスタムイベントの作成

独自のイベント(カスタムイベント)を作成するには「Eventオブジェクト」を作成します。

div1 = document.getElementById('div1')
div2 = document.getElementById('div2')
div3 = document.getElementById('div3')
text = document.getElementById('text')
count = 0

# カスタムイベントの登録
completeEvent = new Event('myEvent',{"bubbles":true, "cancelable":true})

# divをクリックしたときのハンドラ
clickHandle = (e)->
    if e.eventPhase != 2 then return
    count++
    e.currentTarget.removeEventListener('click',clickHandle)
    if count == 3
    text.dispatchEvent(new Event('myEvent'))
    return

# 全てのdivをクリックしたときのハンドラ
completeHandle = (e)->
    console.log 'complete'
    return

div1.addEventListener('click',clickHandle)
div2.addEventListener('click',clickHandle)
div3.addEventListener('click',clickHandle)
text.addEventListener('myEvent',completeHandle)

デモ

どんなイベントがビルトインで用意されているかを確認したいときは
MDN:DOMイベントリファレンス