JS_onclick(Event)
이벤트(event)란?
이벤트는 어떠한 사건을 의미한다. 브라우저에서 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.
onclick 속성의 자바스크립트 코드는 사용자가 이 버튼을 클릭했을 '때' 실행된다. 개발자는 어떤 일이 발생했을 때 실행되어야하는 코드를 등록하고 브라우저는 그 일이 발생했을 떄 등록된 코드를 실행하게 되는데 이러한 방식을 이벤트 프로그래밍이라고 한다.
| onclick | 사용자가 버튼을 클릭했을 때 실행 |
| event target | 이벤트가 일어날 객체를 의미하며 여기서는 버튼 태그에 대한 객체가 타겟이 된다. |
| event type | 이벤트의 종류를 의미한다 |
| event handler | 이벤트가 발생했을 때 동작하는 코드를 의미하며 alert(window.location)이 해당된다. |
인라인(inline)방식
<input type = "button" id = "target" onClick="alert('event_1 :' + document.getElementById('target').value);"
value="button" />
인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것을 말한다.
위의 코드는 버튼을 클릭했을 때 인라인 방식으로 본인 스스로를 불러오는 코드이다.
<input type="button"
onclick="alert('event_1 :' + this.value);"
value="button" />
이벤트가 발생한 대상을 필요로하는 경우, this를 통해서 참조할 수 도 있다.
인라인 방식은 태그에 이벤트가 포함이 되고 정보인 HTML과 제어인 JS가 혼재되어 바람직한 방법이 아니다. 그래서 프로퍼티 리스너방법이 존재한다.
프로퍼티 리스너
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JS를 분리할 수 있다는 점에서 선호되는 방식이다.
<body>
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.onclick = function( ) {
alert('Hello world');
}
addEventListener( )
<input type="button" id="target" value="button" />
<script>
let t = document.getElementById('target');
t.addEventListener('click',function(event){
alert('Hello World!! : ' + event.target.value);
});
</script>
이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. 만약 JS에서 파라미터로 객체를 받아와야하는 경우엔 'event'명을 주로 사용한다.
<input type="button" id="target1" value="button1"/>
<input type="button" id="target2" value="button2"/>
<script>
let t1 = document.getElementById("target1");
let t2 = document.getElementById("target2");
function btn_listener(event){
switch (event.target.id) {
case 'target1':
alert("target1 클릭!!");
break;
case 'target2':
alert("target2 클릭!!");
break;
}
}
t1.addEventListener('click', btn_listener);
t2.addEventListener('click', btn_listener);
위의 예시는 EventListener가 가장 선호되는 이유이다.
인라인이나 프로퍼티 리스너 방식을 사용하면, 하나의 이벤트 대상에는 하나의 동일 이벤트 타입 리스너만 가능하지만 addEventListner는 복수가 가능하며 removeEventListner이란 삭제 기능도 보유하고 있어 사용하기 가장 편리하다.