【JavaScript】要素クリックをトリガーにしたイベント

2018年3月6日2019年6月12日JavaScript,イベント

要素クリックをトリガーにしたJavaScriptイベントの実装

JavaScript・jQueryそれぞれ、functionとアロー関数版のサンプルコードです

動作サンプル

動作サンプルではクリック数を表示しています

See the Pen JavaScript click ivent by yochans (@yochans) on CodePen.

JavaScriptでのサンプルコード

HTML

<div id="item"></div>

JavaScript（function）

const target = document.getElementById('target');
let count = 0;

target.addEventListener('click',function() {
　　//処理
 }, false);

JavaScript（アロー関数）

const target = document.getElementById('target');
let count = 0;

target.addEventListener('click', () => {
　　//処理
}, false);

jQueryでのサンプルコード

HTML

<div id="item"></div>

jQuery（function）

$('#target').click(function() {
        //処理
 });

jQuery（アロー関数）

$('#target').click(() => {
        //処理
 });

参考：【jQuery】要素にクリックイベントを実装する方法 | ONE NOTE