[JavaScript]イベントリスナーとイベントハンドラの違い on…属性とaddEventListener関数
【結論】
イベントハンドラ:対象要素/オブジェクトのon…属性/プロパティに割り当てた関数のこと
イベントリスナー:対象オブジェクト(EventTarget)のaddEventListener()メソッドによって割り当てた関数/オブジェクトのこと
解説
onloadでは対象にひとつの関数しか割り当てられないのに対し、addEventListener()では複数割り当てることができる。
イベントハンドラ
例:
HTML
example
JavaScript
const element = window.getElementById("ex"); element.onclick = function () { return true; };
イベントリスナー
例:
const element = window.getElementById("ex"); element.addEventListener("click", function (event) { return true; });