day34) [JavaScript] addEventListener

[JS로 click 이벤트를 처리 하는 3가지 방법]

이벤트 핸들러(이벤트 리스너)는 특정 element에서 설정한 이벤트가 발생하면 처리하는 함수이다.

가장 보편적으로 사용되는 이벤트는 click event 이므로 이를 사용해 이벤트 핸들러를 호출하는 3가지 방법을 살펴보자.

 

1) onclick: inline방식 - HTML코드에서 등록

-단점: HTML 코드에 자바스크립트 코드가 추가되어 유지보수가 힘들고, 가독성이 좋지 않다.

 

<div onclick="f1();">click</div>

<script>
	function h1(){
    	alert("hi");
    }
</script>

 

2) onclick: 자바스크립트에서 등록

-단점: 하나의 element에 하나의 이벤트 리스너 만을 등록할 수 있다.

<div class="event">Click</div>
<script>
	var click = document.querySelector(".click");
    click.onclick = function(){
    	alert("hi");
    }
</script>

 

[addEventListner 예제]

See the Pen Untitled by seoWork5795 (@seowork5795) on CodePen.