JavaScriptでjQueryを使わずにイベントをtriggerする

  • 49
    いいね
  • 2
    コメント
この記事は最終更新日から1年以上が経過しています。

基本的なことなのですが、すぐ忘れるので。。。

JavaScriptでDOMノードの任意のイベントを発火するには以下の様にします。

function triggerEvent(element, event) {
   if (document.createEvent) {
       // IE以外
       var evt = document.createEvent("HTMLEvents");
       evt.initEvent(event, true, true ); // event type, bubbling, cancelable
       return element.dispatchEvent(evt);
   } else {
       // IE
       var evt = document.createEventObject();
       return element.fireEvent("on"+event, evt)
   }
}

例えば、mouseoverイベントをトリガーしたければ、以下のようにします。

HTML

<a id="the_link" href="http://google.com">google</a>

JavaScript

var a = document.getElementById("the_link");
triggerEvent(a, 'mouseover');

おまけ

clickイベントを発火したいときはもっと簡単です。上みたいなtriggerEventメソッドを使う必要はなく

var a = document.getElementById("the_link");
a.click();

で大丈夫です。