Javascript - 이벤트

이벤트

브라우저 상의 동작, 행위를 나타내는 것으로 click, keydown, keyup, mouseover, mouseout, submit 등이 있다.

이벤트 리스너(Event Listener)

이벤트가 발생하는 것을 대기하고 이벤트의 발생이 감지되면 연결된 기능을 수행함

ex) onclick, onkeyup, onchange ..

이벤트 핸들러(Event Handler)

이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수

이벤트 모델

1. 인라인 이벤트 모델

요소 내부에 이벤트 리스너와 핸들러를 작성

<button onclick="test(this)">버튼</button>

  function test(btn){
   	btn.style.color = "white"; 
  }

2. 고전 이벤트 모델

요소가 가지고 있는 이벤트 속성에 이벤트 핸들러를 직접 연결

<button id="btn1">고전 모델</button>

document.getElementById("btn1").onclick = function(){
 	 document.getElementById("btn1").style.color = "green";
}

고전 이벤트 모델의 단점

한 요소에 한 이벤트 핸들러만 적용 가능하다. 이를 해결하기 위해 표준 이벤트 모델이 나왔다.

3. 표준 이벤트 모델

고전 이벤트 모델을 개선한 것으로 실제로 가장 많이 사용된다.

<button id="btn2">표준 모델</button>

document.getElementById("btn2").addEventListender("click",function(){
 	this.style.color = "red"; 
}