[Javascript]イベント

≪イベント｜Events｜ldap≫이벤트とは、Webページで発生したすべての状況を指します.クリック、ドラッグ、ホイール操作だけでなく、リフレッシュ、接続なども이벤트です.Webページでは、このような이벤트が発生するたびにJavaScriptが実行され、ページが正常に動作します.
クライアントイベント
通常、JavaScriptではクライアントプログラミングが行われます.したがって、ほとんどの場合、クライアントイベントに関連します.クライアントイベントは次のようになります.

mouseover/mouseout, mouseenter/mouseleave
本表では、上記2つのイベントの意味は同じで、いずれも마우스 포인터가 요소에 올라감 벗어남である.二つの活動の違いは何ですか.
2つのイベントの違いは、サブ要素が含まれているかどうかです.mouseover/mouseoutイベントは、マウスポインタが指定された要素とその次のサブ要素に移動したときに発生します.対照的に、mouseenter/mouseleaveイベントは、要素上にマウスポインタが置かれているか、または要素から離れている場合にのみイベントを励起し、マウスがサブ要素から離れている場合にはイベントを励起しません.
イベント駆動モデル
議論を続けますが、JavaScriptはイベントの発生に応じて処理コードを記述します.この合成方法を이벤트 구동 모델(이벤트 드리븐 모델)と呼ぶ.
イベントハンドラ이벤트 핸들러は、イベント発生時に処理されるコードを記録するための関数である.이벤트 핸들러は、

obj.on이벤트명 = function() {};
또는
obj.on이벤트명 = 함수명;

objはwindowまたは要素オブジェクト(ノード)を表します.さらに、イベントハンドラの1つの特徴は、理解したばかりのイベント名の前にonを付けることである.その後、=の後にイベントの処理関数を書いて、イベントハンドラを作成できます.
この方式には3つの注意点がある.

アクティビティ名は小文字で記述されます.

関数名を書くのは呼び出しではありません.

idノード取得方法window.onloadイベントを記述し、その内部にイベントハンドラを記述する.

イベントリスナー이벤트 핸들러の方法には大きな欠点がある.つまり、同じ要素/イベントに対して複数のイベントハンドラを登録することはできません.Webページがますます複雑になるにつれて、同じ要素/イベントに複数の処理を登録する必要があり、이벤트 리스너がこのために現れた.이벤트 리스너は、同じ要素/イベントに複数のイベントハンドラを登録できる構文である.이벤트 리스너は、

elem.addEventListener(event, listener, capture);

elemは要素オブジェクトを記述し、eventはイベントタイプを記述し、listenerはイベントの処理を記述する.最後のパラメータは、イベント方向を設定するパラメータであるcaptureです.この概念は後で単独で議論する内容なので,現在は最後のパラメータとして入れることができ,程度さえ分かればよい.
イベントの登録
次に、イベントの登録方法について説明します.
タグにイベントを定義する(イベントハンドラ)
1つ目の方法は、タグ内で属性のようにイベントを定義することです.

<button id="btn1" onclick="btn_click()">
<!--"btn_click()"대신 코드를 기술하는것도 가능!-->

function btn_click() {
	//버튼 클릭시 동작 할 기능
}

要素オブジェクトとして宣言されたProperty(イベントハンドラ)
2つ目の方法は、htmlドキュメントをJavaScriptファイルからさらに分離することです.通常、イベントハンドラはこのように使用されます.

<button id="btn1">

document.getElementById('btn1').onclick = function() {
	//클릭시 일어날 이벤트 기술
};

前述したように、この方法では、まずページをロードするイベントについて説明する必要があります.ページを読み込む前にページの要素を取得することは不可能です.したがって、実際に使用する場合は、次の操作を行います.

window.onload = function() {
	document.getElementById('btn1').onclick = function() {
    	};
};

イベントリスナーの利用
最後の方法は、이벤트 리스너を使用するaddEventListener方法である.

<button id="btn1">

document.getElementById('btn1').addEventListener('click', function() {
	//이벤트의 동작
}, false);

この方法は前述していませんが、ページをロードしてノードを取得し、イベントを登録することをお勧めします.イベントリスナーを使用してページをロードするには、次の手順に従います.

document.addEventListener('DOMContentLoaded', function() {
	document.getElementById('btn1').addEventListener('click', function() {
		//이벤트의 동작
	}, false);
}, false);

DOMContentLoadedイベントは、ページがロードされた(DOM要素がロードされた)イベントを表します.
DOMContentLoadとonloadの違い
2つのロード方式の違いは、イメージのロードにあります.通常、画像は、他の要素に比べて長いロード時間を必要とし、altなどの直ちにロードする必要はない.onloadイベントとは、ページと画像の両方がロードされた場合に処理を開始するイベントであり、DOMContentLoadedとは、ページのロードが完了した場合にのみ処理を開始するイベントであり、画像ではない.
したがって、DOMContentLoadedを使用することをお勧めします.DOMContentLoadedの実行速度が速く、イメージロードがイベントの処理に適していないためです.