[WEB]Browser Event, Event object, Event handler

Event

브라우저에는 많은 이벤트가 발생합니다.

브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 
이벤트가 발생합니다.

이벤트를 브라우저가 발생시켜주니, 우리는 그때 어떤 일을 하라고 할 일을 등록할 수가 있습니다.

다시 말해, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다.

그것을 자바스크립트로 구현할 수 있습니다.

 

이벤트 등록

이벤트 등록 표준방법입니다.

addEventListener 함수를 사용할 수 있습니다.

var el = document.querySelector(".outside");
el.addEventListener("click", function(){
//do something..
}, false);

addEventListener 함수의 두 번째 인자는 함수입니다.

이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 이벤트핸들러(Event Handler) 또는 이벤트리스너(Event Listener)라고 합니다.

콜백함수는 이벤트가 발생할 때 실행됩니다. 

 

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서 리스너 함수에 전달합니다.

따라서 이벤트리스너 안에서는 이벤트객체를 활용해서 추가적인 작업을 할 수 있게 됩니다. 

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);

가장 많이 쓰이는 건 event.target입니다.

event.target은 이벤트가 발생한 element를 가리킵니다. 

element도 객체이므로 안에 nodeName이나 classname과 같이 element가 가진 속성을 사용할 수 있습니다.

 

다른 ex)

var el = document.querySelector(".outside");
 
el.addEventListener("click",function(e){
  var target = e.target;
  console.log(target.className, target.nodeName);
  console.log(target.innerText);
  debugger;
});
 

 

 

 

 

*예전에는 onclick 메소드를 사용했지만, 요즘은 addEvenetListener을 사용하는게 좋음

 

도움되는 사이트 :

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

https://developer.mozilla.org/en-US/docs/Web/Events

 

 

참고 사이트 : http://www.edwith.org/

※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※