学習目標

イベントを登録できます.

イベントハンドラとは何か知っています.

イベントタイプ、イベントオブジェクトを理解します.

イベントがどのように非同期で実行されたかを説明できます.

イベントの理解

Event

ブラウザでは多くのイベントが発生します.
マウスを使用してブラウザの画面をズームしたり、スクロールしたり、移動したり、選択したりすると、イベントが発生します.
ブラウザはイベントをトリガーし、この時点で何をするかを登録できます.
言い換えれば、各HTMLページでイベント(主にキーボードやマウス関連)が発生したときに特定の動作(いくつかのこと)を実行したい場合は、対応するページを見つけてページを登録することができます.JavaScriptを使用して実装できます.

イベントタイプ(イベント参照)

https://developer.mozilla.org/en-US/docs/Web/Events

イベントの登録

イベント登録の標準メソッド.addEventListener関数が使用可能です.

var el = document.getElementById("outside");
el.addEventListener("click", function(){
//do something..
}, false);

addEventListener関数の2番目のパラメータは関数です.この関数は、後でイベントが発生したときに実行される関数で、イベントハンドラまたはイベントリスナーと呼ばれます.
イベントリスナーコールバック関数は、イベント発生時に実行されます.

イベントオブジェクト

イベントリスナーは、実行時にどのイベントによって実行され、パラメータとしてイベントオブジェクトを作成します.したがって、イベントリスナーでは、イベントオブジェクトを使用して他の操作を実行できます.

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

一番よく使われるのはイベントですターゲット.イベントが発生した要素.
https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y

eventオブジェクトのpreventDefaultメソッド

<a href="https://naver.com">네이버</a>

var a = document.querySelector('a')
a.addEventListener("click", function(e) {
    e.preventDefault();
});

onclickプロパティを使用してイベントハンドラを登録する

これは役に立つように見えますが、複数のイベント登録ができないため、あまり効果的ではありません.
したがって、イベント登録にはaddEventListenerが使用されることに注意してください.