jQueryのdelegate()をJavaScriptで実装する代替サンプルコード

2023-08-05

jQueryのdelegate()メソッドは、指定された要素の子孫要素に対してイベントをバインドするための便利な方法です。JavaScriptの代替としては、addEventListener()メソッドを使用してイベントを処理することができます。以下にdelegate()メソッドの代替サンプルコードを示します。

// 代替サンプルコード
function delegate(element, eventType, selector, handler) {
	element.addEventListener(eventType, function(event) {
	// イベントが指定されたセレクタにマッチする要素かどうかをチェック
	if (event.target.matches(selector)) {
		handler.call(event.target, event);
	}
	});
}

// 使用例
var parentElement = document.getElementById('parent');
delegate(parentElement, 'click', '.child', function(event) {
	console.log('Clicked on a child element:', event.target);
});

この代替サンプルコードでは、delegate()関数を定義しています。この関数は、指定された要素（element）に対して指定されたイベントタイプ（eventType）をバインドし、子孫要素のセレクタ（selector）にマッチした要素でイベントが発生した場合に指定されたハンドラ（handler）を実行します。

使用例では、parentElementというIDを持つ要素の子孫要素のうち、.childというクラスを持つ要素に対してクリックイベントをバインドしています。クリックが発生した場合、コンソールに「Clicked on a child element:」とその要素が出力されます。

このように、addEventListener()メソッドを使用することで、delegate()メソッドの代替となる動作を実装することができます。