javascriptでイベントの追加、削除、引数ありなど（addEventListener, removeEventListener）

基本

「セットしたイベントは削除可能」ってのを前提にする
→「addEventListener()」に関数を直書きするコトを避ける

イベントの追加

基本型: 対象が一つのとき

▼クリック時

function hadl_xxxx() {
	console.log('xxx');
}

let dom = document.querySelector('xxxx');
dom.addEventListener('click', hadl_xxxx);

基本型: 対象が複数あるとき

▼クリック時

function hadl_xxxx() {
	console.log('xxx');
}

let dom_many = document.querySelectorAll('xxxx');
dom_many.forEach(function(element) {
	element.addEventListener('click', hadl_xxxx);
});

引数アリ

▼クリック時

function hadl_xxxx(e) {
	console.log('xxx');
}
let _hadl_xxxx = (e) => hadl_xxxx(e); // いったん変数にアロー関数を格納

let dom = document.querySelector('xxxx');
dom.addEventListener('click', _hadl_xxxx);

クラス内とかでthisを使えるようにしておきたい

▼クリック時

function hadl_xxxx() {
	console.log(this.xxx);
}

let dom = document.querySelector('xxxx');
dom.addEventListener('click', hadl_xxxx.bind(this));

イベントの削除

dom.addEventListener('click', hadl_xxxx); // ←コイツを削除したい

dom.removeEventListener('click', hadl_xxxx);

イベントの追加時のメモ

任意のタイミングでイベントを追加し、その後、任意のタイミングで削除したい…ってコトがある

1. イベント追加時に諸々保存しておく
2. 必要なイベントを削除

▼サンプル。必要に応じて改修

let event_store = []; // 各イベントの設定の格納先

function addEventHandler(selector, eventType, handler) {
	const target = document.querySelector(selector);
	if (target && target.parentNode) {
		let tmp = ({
			selector: selector,
			eventType: eventType,
			handler: handler,
		});
		event_store.push(tmp);
		target.addEventListener(eventType, handler);
	}
}

function removeEventHandler(one_event) {
	const target = document.querySelector(one_event.selector);
	if (target && target.parentNode) {
		target.removeEventListener(one_event.eventType, one_event.handler);
	}
}

function removeEventHandler_all() {
	for (let idx in event_store) {
		this.removeEventHandler(event_store[idx]);
	}
	event_store = [];
}

// 各イベント発火時に実行したいメソッドたち
function hadl_xxx(){}
function hadl_xxy(){}
function hadl_xyy(){}

// イベント発火時に実行したい関数をいったん配列に格納
let seed_trg_handler = {};
seed_trg_handler['abc'] = hadl_xxx;
seed_trg_handler['def'] = hadl_xxy;
seed_trg_handler['ghi'] = hadl_xyy;

// イベントの設定
addEventHandler('.xxx', 'click', seed_trg_handler[abc]);
addEventHandler('.xxy', 'click', seed_trg_handler[def]);
addEventHandler('.xyy', 'click', seed_trg_handler[ghi]);

// 指定したセレクター、イベント、関数の組み合わせを削除
let remove_one_event = ({
	selector: '.xxy',
	eventType: 'click',
	handler: seed_trg_handler[def],
});
removeEventHandler(remove_one_event);

// イベントをマルっと削除
removeEventHandler_all();

各イベントの設定をevent_storeに格納するときに添え字を指定しておけば、削除するときもラクになる…はず