JavaScript: HTML要素に対してクリックイベントを発火させる

button 要素や div 要素等の HTML 要素に対してクリックイベントを発火させたい場合は、 HTML 要素の click() メソッドを使用します。

参考記事: MDN HTMLElement.click()

書式

elem.click();

クリックイベントを発火のサンプルコード

button要素( id="btn" )に対してクリックイベントを発火させるコードです。

HTML


<button id="btn">ボタン</button>

JavaScript

window.onload = function(){

  let b = document.getElementById('btn');
  
  // イベントハンドラ
  b.addEventListener('click', function(){
      console.log('clicked');
  }, false);
  
  // クリックイベントを発火
  b.click();

}

上のコードでは「window.onload」の中に記述していますので、 そのタイミングで "clicked" と表示されます。

a要素に対する注意点

click()メソッドはaタグには直接機能しません。 aタグの場合、dispatchEventメソッドを使用してイベントを発火させる必要があります。

// aタグのクリックイベントを発火
const a = document.getElementById('link');
const event = new MouseEvent('click', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
a.dispatchEvent(event);

まとめ

JavaScriptのclick()メソッドを使うと、 簡単にクリックイベントを発火させることができます。 aタグに対してはdispatchEventメソッドを使用することで同様の効果を得られます。 この知識を活用して、よりインタラクティブなWebアプリケーションを作成してみてください。

JavaScript入門