JavaScript Event Handling

11752 ワード

Eventとは?

=JavaScript codeユーザーの入力またはドキュメントまたはブラウザのステータスの変化を通知します.たとえば、マウスクリック、キーボード入力、画像、htmlドキュメントのロード、timer's timeoutなどです.
=HTML 5ではeventは70種類以上あります.
発生したイベントに対応するために作成されたJavaScriptコードをeventlistenerと呼ぶ.
イベントリスナー名は、イベント名の前に「on」を付けます.
イベントリスナーは、次の4つの方法で作成できます.

HTMLタグ内で直接作成
例)

<p onmouseover = "this.style.backgroundColor = 'orchid'"
	onmouseout = "this.style.backgroundColor = 'white'"></p>

マウスを

ラベルにぶら下げると青色に変更でき、ラベルにぶら下げると白色に変更できます.

DOMオブジェクトのイベントリスナープロパティ(プロパティ)で作成
例)

<p id="firstP"> 마우스 올리면 orchid 색으로 변경</p>
....
function over() { //onmouseover 이벤트 리스너로 사용 할 함수
....
}
....
var p = document.getElementById("firstP");
p.onmouseover = over; 
//DOM 객체인 p의 onmouseover속성에 pointer방식으로 over 주소값자체를 넣는다.
//(C++에서 사용되는 pointer방식임)

(注意:p.onmouseover=over();このメソッドを呼び出すと、アドレス値が代入されないためエラー!)
addEventLister()メソッドを使用して

DOMオブジェクトを処理
syntax:

addEventListener(eventName, listener, useCapture)

eventName:イベントタイプを表す文字列(e.g.、click、load、keydownなど)
Listener:イベントリスナーの関数名を登録します(呼び出し関数ではありません!)
関数アドレス値を登録する必要があるため、関数名のみを含む)
最後のパラメータuseCaptureはオプションです
例)

p.addEventListener("mouseover",over) //onmouseover 리스너로 over() 메소드 등록

匿名関数を使用してイベントリスナーを作成します(DOMオブジェクトのイベントリスナープロパティで作成するのと同じですが、直接匿名作成関数とは異なります).
なぜ使いますか.コードが短い場合や、1つの場所でしか使用されない場合は、匿名関数が便利です.
例)

p.onmouseover=function(){
	this.style.backgroundColor="orchid";};
p.addEventListener("mouseover",function(){
	this.style.backgroundColor="orchid";}
    );

Eventオブジェクトとは?

イベントに関連する情報/属性は、イベントオブジェクトに含まれて伝達、受信、および利用できます.
イベントオブジェクトがイベントlistener関数に渡される最初のパラメータ
例)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 객체 전달받기</title>
</head>
<body>
<p id="p">마우스를 올려 보세요</p>
<button onclick="f(event)">클릭하세요</button>
<script>
function f(e) { // e는 현재 발생한 이벤트 객체
	alert(e.type); // e.type으로 이벤트 종류 출력
}
document.getElementById("p").onmouseover = f;
//객체의 onmouseover 리스너로 함수 f 등록
</script>
</body>
</html>

イベントオブジェクトの情報は、イベントによって若干異なります.
一般メンバー:type、target、currentTarget、defaultPrevented、preventDefault()
targetは、eventtargetオブジェクトを指します.
イベントターゲットオブジェクトは、イベントを開始するDOMオブジェクトです.(e.g.,

Reference

この問題について(JavaScript Event Handling), 我々は、より多くの情報をここで見つけました https://velog.io/@miscaminos/JavaScript-Event-Handling

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

LinuxでのSSHリモート接続サービスカードの遅い全過程を解決する

[WebDevCurriculum]システムのバンドルと構築

JavaScript Event Handling

Eventとは?

Eventオブジェクトとは?

イベントフローとは?

onload

Reference