GoogleChromeでdispatchEventが思い通りに動かない JavaScript

document.createEventで作ったイベントがGoogleChromeだけ異なる動きをする。

対処

createEventは実行する関数の中で作るようにする。
関数の外で作ると
GChrome - 動かない（一回だけ動く？）
IE, Firefox - 動く

確認コード

documentをどこでもいいのでクリックすると、チェックボックスがクリックされる。
GCは一度チェックが入って終わり。
GC以外はチェックが入ったり消えたりする。
GCでも動くようにするには下のコメントアウトのようにする。

// created-mouse-event doesn't toggle checkbox
// in Google Chrome (or Webkit)
// events need to be made each time

// el.click() does toggle ...


document.body.insertAdjacentHTML("beforeend", "<input id='test' type='checkbox'>")

var ev = document.createEvent("MouseEvent")
ev.initEvent("click", false, false)

var el = document.getElementById("test")

document.addEventListener("click", fn, false)
function fn(){
  el.dispatchEvent(ev)
}

/*
// this will toggle checkbox in Google Chrome
function fn(){
  var ev = document.createEvent("MouseEvent")
  ev.initEvent("click", false, false)
  el.dispatchEvent(ev)
}
*/