≪イベント｜Events｜ldap≫

イベントとは、Webページがユーザーと対話するときに発生する動作です.(クリックしてマウスを移動...)つまり、イベントの発生はWebページに何らかのアクションが発生することを意味し、Webブラウザがそれを教えてくれます.

1.イベントハンドラ

イベントハンドラの役割は、イベントを処理する関数に関連付けることです.
*イベントハンドラ=イベントリスナー

2.転送イベントリスナー

Propertyとしてイベントに登録されたターゲットオブジェクトまたは要素.
-JavaScriptコードにPropertyとして登録
-属性としてHTMLタグに登録

イベントリスナーをオブジェクトまたは要素に渡す方法.
－ addEventListener()－ attachEvent() 대상객체.addEventListener(이벤트명, 실행할이벤트함수, 이벤트전파방식) 대상객체.attachEvent(이벤트명, 실행할이벤트함수)

*addEventListener()とattachEvent()の両方の役割は同じですが、サポートされているブラウザは異なります.addEventListener()はほとんどのブラウザでサポートされています.

// 아이디가 button인 요소를 선택하여 변수 button에 지정
var button = document.getElementById('button');
// 이벤트가 발생하면 실행할 함수
function clickShow () {
	console.log("click");
}
// 이벤트 핸들러 연결
button.addEventListener('click', clickShow);

3.イベントリスナーの削除

－ removeEventListener() 대상객체.removeEventListener(이벤트명, 실행할이벤트함수, 이벤트전파방식)

4.呼び出しイベント

①アクティブオブジェクトまたはエレメントであるProperty登録のイベントリスナーを最初に呼び出す
②addEventListener()メソッドで登録したイベントリスナーの順に呼び出す

5.イベントのデフォルト動作を停止する

－ preventDefault() 대상객체.preventDefault();

6.イベントの伝播

①発泡伝播方式
イベントが発生した要素から、DOMツリーに沿って上へ伝播します.
要素のリスナーが実行されると、親要素に登録されたリスナーが実行され、親要素に登録されたリスナーが再実行されます.これらのイベントの伝播はDocumentオブジェクト、最後にWindowオブジェクトに続きます.
=>ページ内部のボタンをクリックすると、ラップボタンの親ラベルもクリックイベントに反応します.
②捕捉(捕捉)伝播方式
DOMツリーの上部からイベントが発生した要素を下に伝播します.
この伝播方式では、まずWindowオブジェクトのリスナーを実行し、次にDocumentオブジェクトに登録されたリスナーを実行し、そのサブエレメントに登録されたリスナーを実行します.これらのイベントの伝播は、イベントが発生する要素に続きます.
この伝播方式を使用するために、trueはaddEventListener()法の3番目のパラメータに渡すことができる.

document.getElementById("click").addEventListener("click", clickShow, true);

7.イベント伝播の停止

－ stopPropagation() 대상객체.stopPropagation();参考資料
🔗 TCP School