[javascript] Event의 구성요소와 등록방법

1)Event의 구성요소

 

(1)event target (대상)

event가 일어날 객체(요소)를 말한다. 

 

(2)event type 

event의 종류를 의미한다. click, scroll 등이 있다.

 

(3)event handler

event가 발생했을 때 동작하는 코드를 말한다.

 

2)Event 등록방법 

 

(1)Inline

event target 태그 속성으로 지정함.

<input type="button" onclick="alert('Hello world');" value="button" />

(2)property Listener

event target에 해당하는 객체의 property로 event를 등록하는 것을 말함.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(){
        alert('Hello world');
    }
</script>

(3)addEventListener()

event를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 event handler를 등록할 수 있음.

addEventListener() 메서드는 이벤트 타입, 이벤트 핸들러 함수, 옵션(생략 가능함)이라는 세 개의 매개변수를 가집니다.

 

[Javascript] 이벤트(Event)에 관하여

 

(4)removeEventListener() 

removeEventListener() 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다.addEventListener() 메서드와 마찬가지로 세 개의 매개변수를 가집니다.

const btnNode = document.getElementById("btn");

const handleClick = function () {
  console.log("버튼 클릭");};

btnNode.addEventListener("click", handleClick);
btnNode.removeEventListener("click", handleClick);

 

[JS]이벤트 핸들러와 이벤트 리스너

 

3)인라인방식 및 Property Listener 방식과 addEventListener()  방식간 차이

 

아래 예시를 통해 알 수 있음. 인라인 방식과 property로 설정하는 경우 앞에 'on' 붙임. addEventListener()는 그렇지 않음.

 

[HTML]
<element onkeydown="goodFunc()"> 

[JS]
object.onkeydown = function goodFunc(){ }; 

object.addEventListener("keydown", goodFunc());