JavaScript: HTML要素に対してクリックイベントを発火させる
button 要素や div 要素等の HTML 要素に対してクリックイベントを発火させたい場合は、 HTML 要素の 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アプリケーションを作成してみてください。