eventHandler関数、eventHandlerの最初のパラメータ.

event.preventDefault

イベントイベントイベント

イベントは何が起こったのかの合図!
例えば、ユーザは、때、スクロール때またはフィールド内容때を変更する.
すべてのDOM 노드がこの信号を生成します.
+アクティビティはDOMに限定されません.

よくある有用なDOMイベント

click:オブジェクト

をクリック

dblclick:ダブルクリック

blur:フォーカスがオブジェクトにない場合

focus:フォーカスがオブジェクトの場合

change:オブジェクトの内容が変更され、フォーカスが失われた場合

select:オプションなどを選択

load:ドキュメントまたはオブジェクトがロードされている場合

mouseover:オブジェクトにカーソルを合わせる

mouseout:カーソルがオブジェクトから離れている場合

submit:<form>コミット時励起

keyup:キーボードを押して解放

keydown:キーボードを押す

error:エラーが発生した場合

scroll:操作スクロールバー

event handler

イベントに反応するには、イベント発生時に実行される関数Handler Handlerを割り当てる必要があります.
HandlerはJavaScriptコードでユーザーの行動に対する反応を表現した!
プロセッサは、さまざまな方法で割り当てることができます.

onclick="..."

<button type="button" onclick="alert('클릭!')">submit</button>

このボタンをクリックすると、onclickのコードが実行されます.인라인方式は、イベントのソースを容易に理解するために、イベントをラベルに含める.
しかし、情報HTMLと制御JavaScriptが混在しているため、理想的な方法とは言えない.

DOM Propertiesリスナー

イベントをイベントターゲットに対応するオブジェクトのプロパティとして登録します.
これはHTMLとJavaScriptの分離の第一選択方法です.
addEventListenerを使用します.

<button type="button" id="btn">submit</button>
<script>
  btn.onclick = function () {
  	alert('클릭!');
  };
</script>

よく犯す過ち

1.

<!----- 올바른 방법 ----->
button.onclick = sayHello;

// 틀린 방법
button.onclick = sayHello();

sayHello()カッコ付けは、関数を呼び出すことを意味します.
sayHello()がpropertyに割り当てられている場合、関数に割り当て結果値(result)が呼び出されます.
関数sayHelloが返されない場合は、onclickpropertienundefinedが割り当てられるため、イベントの要件に従って操作されません.
2.
DOM propertyは大文字と小文字を区別します.
ハンドルを割り当てる場合はbtn.onclickを使用できますが、btn.ONCLICKbtn.onClickは使用できません.
3.
ハンドルをsetAttributeに割り当てないでください.

// body 클릭하면 에러 발생 !
// 속성은 항상 문자열이기 때문에 , 함수가 문자열이 되어버린다.
document.body.setAttribute('onclick', function() { alert(1) });

addEventListener

addEventListenerは、イベントを登録する最良の方法です.
複数のイベントハンドラを登録できます.

element.addEventListener(event, handler, [options]);

event:イベント名

handler:Handler関数

options:以下のプロパティを持つオブジェクト

once:trueプレーンイベントがトリガーされると、リスナーは自動的に削除されます.

capture:イベントをどの段階で処理すべきかを示すProperty.

passive:trueの場合、リスナーが指定した関数はpreventDefault()を呼び出さない.

element.removeEventListener(event, handler, [options]);

Handlerの削除removeEventListener