[TIL][JS]Event


≪イベント|Events|ldap≫

interaction: 상호작용Webサービスを利用するユーザと効率的に対話するために、
HTMLとCSS構造のみが限られており、JavaScript
動的に対話できます.
JavaScriptの多くの要素の中で、Eventも機能します.

addEventListener


アクティビティを実行するときに使用する関数.
ご覧のように直感的な単語は
活動がいつ起こるかを聞くという意味です.
요소.addEventListener(이벤트 종류, function() {
// 이벤트 발생 시 실행 내용
上記のようにすることができます.

callback function


上記の例では、パラメータとして渡される関数を「コールバック関数」と呼びます.

Click Event

clickイベントではサイト上で最も多くのイベントが発生します.
const thisIsButton = document.getElementsByClassName('login-btn')[0];

thisIsButton.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
getElementsByClassNameを使用して、login-btnという名前のクラスを検索します.ここで、「getElements」のように複数型であるのは、クラスが同じクラス名で複数存在できるためであり、そのため配列[0]の位置も宣言されている.

Key Event

key down key upこれはプレイヤーがキーボードを押したり、浮いたりしたときに発生するイベントです.
const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');


thisIsPw.addEventListener('keydown', function(event) {
  thisIsCode.innerHTML = event.keyCode; 
});
getElementByIDを使用して「password」というIDを検索します.
キーが押されると、上記のイベントが発生するように設定できます.