[JavaScript] 이벤트!!!! - 이벤트 리스너 등록, 이벤트 리스너 삭제

이벤트 

 

 

웹 내에서 일어나는 사건을 뜻한다. (클릭, 키보드 등)

 

 

각각의 이벤트들은 이벤트가 실행되면 실행될 코드 블록인 이벤트 핸들러를 가진다. 

 

event handler register : 이벤트가 발생하면 어떤 함수를 호출할지 등록해놓는 것

 

 

 

 

📌 이벤트 핸들러 등록에는 두 가지 방법이 있다. 

 

1. 타겟.on이벤트명 = 이벤트핸들러함수 
2. 타겟.addEventListner = ('이벤트명', 이벤트핸들러함수); 

예시)
1. button.onclick = handleClick
2. button.addEventListner = ("click", handleClick);

 

보통 2번 방법을 많이 사용하기 때문에 2번으로 공부해보자! 

 

일반적인 사용 방법은 다음과 같다. 

const button = document.querySelector('#inputBtn');

function handleTitleClick(){
    title.style.color = "blue";
}


button.addEventListner("click", handleTitleClick);

의미 : button에 클릭 이벤트가 발생하면 handleTitleClick이라는 함수를 실행해라!

 

위 코드를 해석해보면 

1번째줄 button 변수에 아이디가 'inputBtn'인 html 요소 저장 

5번째줄 button 변수에 'click' 이벤트 핸들러 등록 - button이 클릭되면 handleTitleClick 함수 실행 

2-4번째줄 handleTitleClick 함수 정의

 

*이벤트 속성에 함수를 대입하는 것과 함수호출문을 대입하는 것은 다르다 

   ( 함수 :  handleTitleClick  (o),  함수호출문 : handleTitleClick()  (x) )

 

 

굳이 함수 명을 지정하지 않고 화살표함수를 이용해서 넣어줄 수 있다. 

const button = document.querySelector('#inputBtn');

button.addEventListner('click', ()=> {
	함수 내용 
});

 

 

더 짧게는,,, 이렇게까지 가능하다!

document.querySelector('#inputBtn').addEventListner('click', ()=> {
	함수 내용 
});

 

 

 

 

 

🍯

element에 어떤 리스너를 달아야할지 모를때에는

console.dir(요소객체); 를 입력한다음 on~ 으로 시작하는 속성을 찾아보자!

const oo = document.querySelector("#n0");
console.dir(oo);

개발자도구 콘솔창을 확인해보면 해당 객체가 출력된 것을 볼 수 있다. 

그 안에 on~으로 시작하는 속성이 모두 이벤트들이다. 

 

 

 

 

 

📌 이벤트 리스너 삭제하기 

 

이벤트 리스너를 삭제할 때는 removeEventListener 함수를 이용한다. 

 

[구문]

이벤트타깃.removeEventListner('이벤트명', 이벤트 핸들러 함수, [옵션])

 

[사용예시]

const box = document.querySelector('.Btn');
box.addEventListener('click', onClickBtn);

//3초후 리스너의 함수를 삭제
setTimeout( ()=> {
   box.removeEventListener('click', onClickBtn);
}, 3000); 

function onClickBtn() {
   console.log('box 클릭');
}

 

🚨주의 : removeEventListner()를 사용할 때에는 화살표 함수 사용이 불가능하다. 함수명을 꼭 지정!!