click()の使い方〜JavaScript | IT工房

jQueryでクリックイベントを設置するには、on()を使ったりclick()を使ったりします。
今回はclick()の使い方の説明です。
通常、click()は次のような記述をします。jQuery基礎で学ぶおなじみの書き方です。

$(‘セレクター’).click(function(){
命令文
})

この構文はセレクターがクリックされたら命令を実行するという動きになります。

では、セレクターがクリックされたらではなく、セレクタをクリックするという挙動はどうすれば良いでしょうか？

実はそれもclick()で実現できます。
このような場合はclick()の引数にコールバック関数を入れるのではなく、引数は空にします。
そうすると動的にクリックを行うことができます。

参考例
ボタンをクリックするとリンク先を決めてそのリンク先に遷移する仕組みです。

$(‘a’)[0].click();

HTMLコード

<button id="btn">click</button>

jQueryコード

$('#btn').click(function() {
  var url = 'https://itstudio.co';
  var a = $('body').prepend('<a href=' + url + '></a>');
  $('a')[0].click(); 
})

$(‘a’)[0]とすることで、jQueryオブジェクトからDOMエレメントを取得できます。つまりDOMエレメントはjQueryオブジェクトのインデックス番号が0ということです。

JavaScriptで記述する方法

JavaScriptでクリックイベントを起こさせるにも「click()」を使います。

jQueryと同様の動きをするサンプルです。

<body id="body">
  <button id="btn" onclick="myClick()">click</button>
</body>

function myClick(){
  var body = document.getElementById('body');
  var btn = document.getElementById('btn');
  var url = 'https://itstudio.co';
  var a = document.createElement('a');
  a.setAttribute('href', url);
  body.insertBefore(a,btn);
  a.click();
}