Posted: 2019.02.12 / Category: javascript 

いつもはjQueryを使用していますが、素のJavaScriptでクリックイベントやクラスの切り替えを行ってみます。

要素取得する

セレクタで指定したid・classの要素を取得してみましょう。
これがないと始まりませんね。

要素を一つだけ取得する

以前は、idがgetElementByIdで、classはgetElementsByClassNameを使用していましたが、最近はquerySelectorが主流です。
CSSのセレクタのように要素名を指定するか、.でclass、#でidを取得できます。

JavaScript

// 要素名で取得
document.querySelector('div');
// classを取得
document.querySelector('.example');
// idを取得
document.querySelector('#example');

複数の要素を取得する

複数の要素を取得する場合はquerySelectorAllを使用します。
idは一つの要素しかないので、要素名かclass名を指定します。

JavaScript

document.querySelectorAll('.example')

jQueryの場合

jQueryは$で取得します。
基本的には複数の要素が選択されるので、一つだけ選択したい場合はセレクタで:firstを指定します。

jQuery

// 要素名で取得 
$('div');
// classを取得
$('.example');
// idを取得
$('#example');

イベント処理

JavaScriptは要素をクリックした時や、マウスオーバーした時など、何らかの操作行った時に実行させるということが多いですね。

イベントの処理はaddEventListenerを使用します。
addEventListenerは第一引数にイベント名、第二引数にイベントが実行された時の処理を記述します。

クリックイベント

btnクラスをクリックした時実行するということをやってみます。
addEventListenerの第一引数にclickを指定します。

JavaScript

var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
	console.log('クリック');
});

モダンブラウザ（IE以外）では下記のようにアロー関数を使用して、少しだけ短く書くことができます。
thisの扱いが変わってたりと機能もまったく同じではないですが。

JavaScript

const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  console.log('クリック');
});

以後はこちらの書き方に統一していきます。

マウスオーバー/マウスアウトイベント

マウスオーバー/アウトは比較的使用頻度が高いイベントですね。
clickの部分をmouseenter/mouseleaveに変更すると動作します。

JavaScript

const btn = document.querySelector('.btn');
btn.addEventListener('mouseenter', (e) => {
  console.log('マウスオーバー');
});
btn.addEventListener('mouseleave', (e) => {
  console.log('マウスアウト');
});

mouseover/mouseoutというイベントもありますが、こちらは親要素にもイベントリスナーを設定していた場合、子のイベントが実行されたとき親のイベントも実行されます。

複数の要素の場合

querySelectorAllを使用して複数の要素を取得している場合、取得できるのは要素ではなくNodeListになるので、forEach等でループして一つ一つ登録します。

JavaScript

const btns = document.querySelectorAll('.btn');
btns.forEach((btn) => {
	btn.addEventListener('click', () => {
		console.log(index);
	});
});

jQueryの場合

jQueryの場合は一つでも複数の要素でも書き方は同じですね。

jQuery

// クリックイベント
$('.btn').on('click', function() {
	console.log('クリック');
});

// オーベー/アウトイベント
$('.btn').mouseenter(function() {
	console.log('マウスオーバー');
}).mouseleave(function() {
	console.log('マウスアウト');
});

クラスの追加・削除

最近はCSSで結構なことができるようになってきたので、JavaScriptでクラスのコントロールをするだけで色々とできるようになりますね。

クラスを操作するにはclassListを使用します。
下記メソッドがあります。

btnクラスの要素をクリックする度に、activeクラスの追加・削除を切り替えるということをやってみます。

JavaScript

const btn = document.querySelector('.btn');
btn.addEventListener('click', (e) => {
  e.target.classList.toggle('active');
});

jQueryの場合

jQueryの場合はtoggleClassを使用します。

JavaScript

$('.btn').on('click', function() {
	$(this).toggleClass('active')
});