【JavaScript】addEventListenerでイベント処理を実装してみよう

はじめに

コジマです。

もう多くの人がVueとかReactなんかをつかってイベント処理を簡単に実装できるような世の中になっていますが、
その技術の根本であるaddEventListenerを使った超簡単なサンプルを紹介しようと思います。

ピュアなJavaScriptを学ばずにJSフレームワークを使っている人に一度読んでいただけたら嬉しいなと思います。

簡単なやり方

以下の手順を踏みます

Vue.jsで言えば@clickや@inputのことですね。
意外にピュアなJSで書くのも難しくないですが、JSフレームワークを使うとバインドであっさり片付くあたり
モダンな技術の素晴らしさがうかがえます。

以下にサンプルをいくつか置いておきますので実装の参考にしてみてください。

クリックイベントのサンプル

このボタンをクリックするとアラートが表示されます。
（AMP表示や一部ブラウザだと動かないかもです。ご了承ください。）
クリックイベントのサンプル

HTML

<button id="sample-button">クリックイベントのサンプル</button>

JavaScript

document.getElementById('sample-button').addEventListener('click', function(){
  alert('クリックしたよ');
});

ダブルクリックイベントのサンプル

このボタンをダブルクリックするとアラートが表示されます。
ダブルクリックイベントのサンプル

HTML

<button id="sample-dbbutton">ダブルクリックイベントのサンプル</button>

JavaScript

document.getElementById('sample-dbbutton').addEventListener('dblclick', function(){
  alert('ダブルクリックしたよ');
});

インプットイベントのサンプル

このテキストフォームに文字を入力すると下に反映されます。

HTML

<h3>インプットイベントのサンプル</h3>
<p><input type="text" id="sample-input"></input>
<div>入力値：<span id="sample-inputted"></span></div>
</p>

JavaScript

document.getElementById('sample-input').addEventListener('input', function(e){
  document.getElementById('sample-inputted').textContent = e.target.value
});

WordPressでJSを使いたい人のために

WordPress内で実装したい場合
Script n Stylesというプラグインが便利です。bodyタグ内にスクリプトを埋め込んでくれるので楽に管理できます。
私も使っています。
https://ja.wordpress.org/plugins/scripts-n-styles/

さいごに

JavaScriptを使ったいくつかの成果物を以下URLにて公開しております。
よかったら見てみてください。
https://kojimanotech.com/js-sample/

FWは便利ですが、私はJavaScriptだったりPowerShellだったり環境構築の手間がない言語は
独学であれこれやりたいとき、とっつきやすくて好んで使っています。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。