자바스크립트(javascript)이벤트란?

 이벤트 는 프로그래밍중인 시스템에서 발생하는 동작 또는 사건입니다.

웹의 경우 브라우저 창 내부에서 이벤트가 발생하고 그 안에있는 특정 항목에 이벤트가 첨부됩니다

 

웹에서 발생하는 이벤트를 정리 해 보자면 

---

-사용자가 특정 요소 위에서 마우스를 클릭하거나 특정 요소 위로 커서를 가져가는 경우

-사용자가 키보드의 키를 누르는 경우

-사용자가 브라우저 창 크기를 조정하거나 닫는 경우

-웹 페이지로드 완료

-양식 제출 중

-재생중인 동영상 또는 일시 중지 되었거나 재생중인 동영상

-오류가 발생 했다는 경우

---

위의 경우 말고도 자바스크립트에서는 수많은 이벤트들이 존재한다.

 

#이벤트핸들러란?

사용 가능한 각 이벤트에 이벤트가 발생할 때 실행되는 코드 블록

(이벤트 리스너 또는 이벤트 처리기로도 불린다.)

 

##addEventListner() 및 removeEventListener()##

addEventListener()함수는 함수 내에서 핸들러를 등록 할 이벤트의 이름과 이에 응답하여 실행 할 

핸들러 함수를 구성하는 코드라는 두 개의 매개 변수를 지정한다.

addEventListener()은 익명 함수로 모든 코드를 함수에 넣는 것이 딱좋다.

removeEvntListener()함수는 이전에 추가 된 리스너를 제거한다. 

 

##이벤트 개체란?

가끔 이벤트 핸들러 함수 내에서, 당신은 같은 이름으로 지정된 매개 변수를 볼 수 있다.

event,evt 이것들을 단순히 e라고 하며 이것들은 이벤트 객체로 지정되어 이벤트 처리기로

자동 전달되어 추가 기능과 정보를 제공한다.

 

아래의 코드를 살펴보자.

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}  

btn.addEventListener('click', bgChange);

여기서 우리는 이벤트 객체 인 e 를 함수에 포함하고 함수에는 배경 색상 스타일을 설정하는 것을 볼 수 e.target있다. 이는 버튼 자체이다. target이벤트 객체 의 속성은 이벤트가 방금 발생한 요소에 대한 참조이다. 따라서이 예제에서는 페이지가 아닌 버튼에 임의의 배경색을 설정한다.e.target여러 요소에서 동일한 이벤트 핸들러를 설정하고 이벤트가 발생할 때 모든 이벤트를 처리하려는 경우 매우 유용하다.