[front] Event

Event

: 프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건, 주로 클라이언트와 서버의 통신을 할 때 매개역할을 한다.

dom으로 이벤트를 사용하는 방법

1. 이벤트 핸들러

: dom의 property에 콜백함수를 추가하여 사용하는 방법

target.이벤트이름 = 콜백함수

<자주 사용하는 이벤트>

이벤트 핸들러에서 이벤트 이름은 'on+이벤트이름'이다

// $div를 클릭 시 console에 '클릭' 출력
$div.onclick = () => console.log('클릭');

이벤트 핸들러로 이벤트를 추가 할 경우 하나의 콜백함수만 정의 할 수 있다.

// $div를 클릭 시 뒤에 선언된 함수인 alert만 실행된다.
$div.onclick = () => console.log('클릭');
$div.onclick = () => alert('클릭');

2. addEventListener

target.addEventListener(이벤트, 콜백함수);

addEventListener를 사용하면 콜백함수를 중복하여 등록할 수 있다.

// $div를 클릭 시 console에 '클릭' 출력 + alert창 출력 두 가지 기능을 한다.
$div.addEventListener('click', ()=>console.log('클릭');
$div.addEventListener('click', ()=>alert('clicked'));

3. event parameter

: 콜백함수를 정의 할 때 parameter로 event를 받아올 수 있다.

function handleClick(event){
  console.log(event.target.value);