[HTML+CSS+JS] Event

1.이벤트 정의

• 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.
  ex)Click event,Mouse event,Scroll event,Resize event ...

2.addEventListener

• 이벤트를 추가할 때 사용하는 함수이다.

• 이벤트를 항시 듣고있는 마이 노트북, 이벤트 들리기만하면 바로 작동되벌임

  요소.addEventListener(이벤트종류, function() {
  	//이벤트가 일어났을 때 실행할 내용
   });

• 특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달합니다.

• addEventListener 함수를 특정 요소에 붙이고 인자로 이벤트의 종류와 이벤트가 발생했을 때 실행할 함수를 전달한다. 이때 인자로 전달되는 함수를 콜백함수라고한다.

• 자주 사용하는 이벤트 : click,contextmenu,dblclick,mousedown,bouseenter,mouseleave,mousemove,mouseover,mouseout,mouseup,pointerlockchange,pointerlockerror,select,wheel 등 ...

  3. 클릭이벤트

• 버튼,사진,글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트

  const thisIsButton = document.getElementsByClassName('login-btn')[0];
  
  thisIsButton.addEventListener('click' , function() {
    // thisIsButton을 클릭하면 실행되는 함수 
  });

4.키이벤트

• 유저가 키보드를 누르면 발생하는 이벤트이다.
• 키보드를 눌렀을 때(keydown), 키보드를 누르고 떼는 순간(keyup), 키보드를 눌러 어떤 텍스트가 작성되는 순간(keypress)

const thisIsPw = document.getElementById('password');
const thisIsCode = document.getElementById('code');

thisIsPw.addEventListener('keydown', function(e) {
  thisIsCode.innerHTML = e.keyCode;
});