[JS] 10-1. 이벤트

✅이벤트란 ?

웹 상에서 일어나는 어떤 사건을 의미한다. 이벤트 핸들러를 원하는 함수에 연결하여 이벤트 발생 시 실행하게 만들 수 있다. 이 과정이 바로 이벤트 생성이다. 

 

 

➰이벤트 핸들러 (이벤트 리스너) 등록 방법 1 - 인라인 방식

이벤트를 HTML요소의 속성으로 직접 지정하는 방식이다. 예시는 다음과 같다.

<button onclick="btnClicked()">클릭해주세요</button>

<script>
function btnClicked() {
	alert("안녕하세요");
}
</script>

위 코드는 HTML코드에 자바스크립트(Javascript)를 추가하는 것이기 때문에 유지보수의 관점에서 좋지 않다.

 

 

➰이벤트 핸들러 (이벤트 리스너) 등록 방법 2 - 프로퍼티 방식

자바스크립트(Javascript)코드에 프로퍼티로 등록하여 사용하는 방식이다. 예시는 다음과 같다.

<button id="btn">클릭해주세요</button>

<script>
    let BTN = document.getElementById('btn');
    BTN.onclick = function () {
    	alert("안녕하세요");
    }
</script>

 

이 방식을 이용하면 하나의 이벤트 핸들러 프로퍼티에는 하나의 이벤트 핸들러만 바인딩 가능하다.

 

 

➰이벤트 핸들러 (이벤트 리스너) 등록 방법 3 - addEventListner() 방식

문법은 객체.addEventListner('이벤트 타입', '함수명')이다. 예시는 다음과 같다.

<button id="btn">클릭해주세요</button>

<script>
    let BTN = document.getElementById('btn');
    function btnClicked() {
    	alert("안녕하세요");
    }
    BTN.addEventListner('click', btnClicked);
    BTN.addEventListner('click', function () {
    	alert("반가워요")
    });
</script>

이 방식을 이용하면 하나의 이벤트 핸들러 프로퍼티에 하나 이상의 이벤트 핸들러를 바인딩 할 수 있다. 프로퍼티 방식은 "on"이 붙은 이벤트 타입을 사용하지만, addEventListner() 방식은 "on"이 붙지 않은 이벤트 타입을 사용한다.

 

 

➰이벤트 핸들러 (이벤트 리스너) 삭제 방법 - removeEventListner() 

등록된 이벤트 리스너 삭제시 사용한다. 예시는 다음과 같다.

BTN.removeEventListner('click', btnClicked);