자바스크립트(이벤트란?)

Javascript(이벤트, 이벤트 핸들러)

Event(이벤트)

이벤트 핸들러 등록하기

.addEventListener() 라고 하는 메소드가 있다. 이 메소드는 2개의 인자를 받는데, string 형식의 이벤트 이름과 또 다른 하나는 이벤트 핸들러 함수이다.

이벤트 핸들러를 작성 할 때에는 익명함수보다는 이름이 있는 함수로 작성하는 것이 유리하다. 이후에도 깔끔하고 재사용이 가능한 코드가 될 것이다.

이벤트핸들러 함수는 실제로 어떠한 이벤트가 fired(여기서는 클릭이 일어났을 때) 실행되는 함수를 말한다.

let eventTarget = document.getElementById('targetElement');
 
eventTarget.addEventListener('click', function() {
  // this block of code will run when click event happens on eventTarget element
});

// 위 보다는 아래 코드가 재사용 면에서 더 낫다. 

function eventHandlerFunction() {
  // this block of code will run when click event happens
}
 
eventTarget.addEventListener('click', eventHandlerFunction);

위 방법 말고도 이벤트 핸들러를 등록하는 방법이 또 있다. 바로 .onevent 속성을 DOM element(event target이 되는 요소)에 적용하는 것이 그것인데, 대표적으로 .onclick이 있다.

on뒤에 소문자 형태의 이벤트 타입 이름을 사용함으로서 이루어진다.

eventTarget.onclick = eventHandlerFunction;

차이점은 .addEventListner() 메소드로는 다수의 이벤트핸들러함수를 추가할 수 있다는 점이다.

다음의 예시를 보자, 클릭을 통해 특정 요소를 나타나고 숨기게 하는 예시이고, 마지막에 추가된 onclick 속성을 이용해 새로운 요소가 나타날 때 view 버튼의 텍스트 내용을 ‘hello, world’로 바꾸는 코드이다. 다시 숨길 때는 view 텍스트 내용으로 돌아가게 하는 내용이다.

let view = document.getElementById('view-button');
let close = document.getElementById('close-button');
let codey = document.getElementById('codey');

let open = function() {
  codey.style.display = 'block';
  close.style.display = 'block';
};

let hide = function() {
  codey.style.display = 'none';
  close.style.display = 'none';
};

view.addEventListener('click', open);
close.addEventListener('click', hide);

// Write your code here

let textChange = ()=> {
  view.innerHTML='Hello, World!';
}

let textReturn = () => {
  view.innerHTML='View';
}

view.onclick = textChange;
close.onclick = textReturn;

이벤트 핸들러 제거하기

.removeEventListener() 를 사용한다. 이 메소드는 이벤트 Listner 메소드와 반대로 작동한다. 이 메소드는 이벤트 타겟을 더이상 이벤트를 ‘듣지 못하게’ 한다.

이벤트 리스너 등록메소드와 비슷하게 두 개의 인자를 받는데, 이벤트 타입과 이벤트 핸들러 펑션이 그것이다 .

구조는 다음과 같다.

eventTarget.removeEventListener('click', eventHandlerFunction);

복수의 이벤트 핸들러가 등록되어 있을 수 있기 때문에, 정확한 이벤트 타입의 이름과 이벤트 핸들러의 이름이 필요하다. addEventListener 메소드에 익명함수가 전달되었다면 , 그 이벤트 리스너는 지워질 수 없다.

이벤트 오브젝트 속성

JS는 이벤트를 이벤트(event) 오브젝트 (참고링크 MDN) (연관된 데이타와 기능들을 속성과 메소드로 포함하여)로 저장한다. 이벤트가 trigger 되면 이벤트 객체는 이벤트 핸들러 함수의 인자로 전달될 수 있다.

function eventHandlerFunction(event){
   console.log(event.timeStamp);
}
 
eventTarget.addEventListener('click', eventHandlerFunction);

위 예시의 경우 클릭 이벤트 가 trigger 될 때까지 걸린 시간을 출력한다.

event가 함수의 인자로 전달된 것을 확인 할 수 있다.

.target / .type / .timeStamp 등의 속성들이 event의 기본 속성으로 지정되어있다.

.target은 이벤트가 등록된 요소를 참조하기 위해 사용되고

.type은 이벤트의 이름에 접근하기 위해 사용되고

.timeStamp는 문서가 로딩되고 이벤트가 trigger 되는데 얼마나 시간이(ms단위) 흘렀는지에 접근하기 위해 사용된다.

아래의 경우 .target을 어떻게 활용하는지 보여준다. event가 적용된 요소를 불러와서 그것의 css 속성인 display를 none으로 바꾸는 기능을 한다.

// Write your code below
let sharePhoto = function(event) {
 event.target.style.display='none';
}

Event types

click 이벤트 외에도 다양한 이벤트의 종류들이 있다. 어떠한 이벤트들은 클릭 등으로 눈에 보이는 반면 어떤 것들은 화면 뒤에서 동작한다. 대표적으로는 load 가 있다. 

 

 

일단 이후는 나중에 추가 정리하겠습니다. 오늘은 할당량을 못채웠네요