[Edge]。→、
EventTarget は DOM インターフェイスで、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装しています。
イベント ターゲット： Element、Document、Window。他に XMLHttpRequest、AudioNode、AudioContext など。
イベント ターゲットにイベント ハンドラーを設定するのに onイベント名 プロパティや、スクリプトを使用することもできます。
| イベント名 | イベント名を記述する。click、focus、mousemove、resize、…。
|
|---|---|
| イベントハンドラー | 関数名、または関数を記述する。 |
HTML：
<SPAN id=IdTest>SPAN要素</SPAN>
JavaScript：
function Job(eve){ //click イベントの処理： 得られる引数は 1 つで、イベント オブジェクトが入ります。トが入る。
D=eve; //…
E=eve.target; //イベントが起きた要素の取得。
alert(E.tagName);
}
IdTest.onclick=Job; //click イベントの割り当て。
JavaScript： 他の方法： 関数式の利用：
IdTest.onclick=function(eve){ //click イベントの処理： 得られる引数は 1 つで、イベント オブジェクトが入ります。
D=eve; //…
E=eve.target; //イベントが起きた要素の取得。
alert(E.tagName);
}
JavaScript： 他の方法： アロー関数式を使用：
IdTest.onclick= eve=>{ //click イベントの処理： 得られる引数は 1 つで、イベント オブジェクトが入ります。
D=eve; //…
A=eve.target; //イベントが起きた要素の取得。
alert(E.tagName);
}
EventTarget.addEventListener()：
HTML：
<SPAN id=IdTest>SPAN要素</SPAN>
JavaScript：
function Job(eve){ //click イベントの処理： 得られる引数は 1 つで、イベント オブジェクトが入ります。
D=eve; //…
A=eve.target; //イベントが起きた要素の取得。
alert(E.tagName);
}
IdTest.addEventListener('click', Job); //click イベントの割り当て。
JavaScript： 他の方法： 関数式の利用：
IdTest.addEventListener('click', function(eve){ //click イベントの割り当てと処理：
D=eve; //…
A=eve.target; //イベントが起きた要素の取得。
alert(E.tagName);
});
JavaScript： 他の方法： アロー関数式を使用：
IdTest.addEventListener('click', eve=>{ //click イベントの割り当てと処理：
D=eve; //…
A=eve.target; //イベントが起きた要素の取得。
alert(E.tagName);
});
addEventListener() では同じイベントでも複数のイベントリスナーを割り当てられます。つまり、
function Job1(eve){ //click イベントの処理1：
…
}
function Job2(eve){ //click イベントの処理2：
…
}
IdTest.addEventListener('click', Job1); //click イベントの割り当て。
IdTest.addEventListener('click', Job2); //click イベントの割り当て。
そして特定のイベントリスナーを削除する：
IdTest.removeEventListener('click', Job1); //
関数式、アロー関数式利用の場合はイベントリスナーの削除は不明。…成功していない。