1. 이벤트 추가하기 - addEventListener() 2. 이벤트 제거하기 - removeEventListener()
이벤트 추가하기 - addEventListner()element.addEventListener(type, eventListener);객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다.
addEventListener()는 2개의 파라미터를 입력받습니다.
- type : 이벤트 타입
- eventListener : 이벤트가 발생했을 때 실행할 함수
import React from 'react'; const App = () => { window.addEventListener('click', async () => { const eventBtn = document.getElementById('ebtn'); eventBtn. title = async function(){ try{ console.log('addEventListner!!!'); } catch(e){ console.log(e); } } }); return ( <div> <button id="ebtn">Click</button> </div> ) } export default App이벤트 제거하기 - removeEventListner()element.removeEventListener(type, eventListener);
이 메소드는 아래의 2가지를 파라미터로 입력 받습니다.
- type : 삭제할 이벤트 타입
-eventListener : 삭제할 이벤트 리스터 (addEventListener()의 2번째 파라미터로 전달된 함수)
removeEventListener() 메소드를 사용해서 이벤트를 삭제하기 위해서는
addEventListener() 메소드를 사용하여 이벤트를 등록할 때,
2번째 파라미터로 전달하는 eventListener를 익명함수로 전달하면 안됩니다.
removeEventListener() 메소드를 호출할 때 2번째 파라미터로 넣어주어야 하기 때문입니다.
<추가 내용 작성중>
👀 이벤트 핸들러 등록 방법
✔ 객체나 요소에 property로 등록
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>JavaScript EventListener</title> </head> <body> <h2>객체나 요소에 property로 등록</h2> <button class="fruits">apple</button> <script> // 아이디가 "fruits"인 요소를 선택 let result = document.querySelector(".fruits"); result. title = function () { //요소의 property로 등록 // 버튼 클릭 시 실행. console.log(result.textContent + "를 클릭하셨습니다."); }; </script> </body> </html> }이벤트 타입별로 오직 하나의 이벤트 핸들러(aka.이벤트 리스너)만 등록할 수 있다는 단점이 있다.
그러나, 아래의 방법으로 이벤트 핸들러를 등록하면, 하나의 객체에 여러 개의 이벤트 핸들러를 등록할 수 있다.
✔ 객체나 요소의 메소드에 전달하는 방법
원형: 대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>JavaScript EventListener</title> </head> <body> <h2>객체나 요소의 메소드에 전달하는 방법</h2> <h2>하나의 객체에 이벤트를 여러개 등록할 수 있다.<h2> <p>아래 버튼에 마우스를 올리거나 클릭해 보세요!</p> <button id="btn">버튼</button> <p id="text"></p> <script> var btn = document.querySelector("#btn"); // 아이디가 "btn"인 요소를 선택함. btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 등록 btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 등록 btn.addEventListener("mouseout", mouseoutBtn); // 선택한 요소에 mouseout 이벤트 등록 function clickBtn() { document.querySelector("#text").innerHTML = "버튼이 클릭됐어요!"; } function mouseoverBtn() { document.querySelector("#text").innerHTML = "버튼 위에 마우스가 있네요!"; } function mouseoutBtn() { document.querySelector("#text").innerHTML = "버튼 밖으로 마우스가 나갔어요!"; } </script> </body> </html>하나의 객체에 여러 개의 이벤트 핸들러를 등록할 수 있다.
첫 번째 방법은 HTML요소에 이벤트 핸들러를 등록하는 방법이며 두 번째 방법은 HTML요소를 이용하지 않고 자바 스크립트 내부에서 등록하는 방법이다. 따라서, 관심사 분리를 위해 후자를 사용하는 것이 권장된다.
관심사 분리?
HTML, CSS, JavaScript가 각각의 로직에 집중할 수 있게 분리하여 코드를 작성하는 것이다.
이벤트 리스너를 프로퍼티로 등록할 때는 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 메소드에서는 "on"이 붙지 않은 이벤트 타입을 사용해야 합니다.
- TCPshool: 이벤트 리스너 등록
👀 이벤트 핸들러 제거 방법
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>JavaScript EventListener</title> </head> <body> <h2>이벤트 리스너 삭제</h2> <p>아래 버튼에 마우스를 올리거나 클릭해 보세요!</p> <button id="btn">삭제 버튼</button> <p id="text"></p> <script> var btn = document.querySelector("#btn"); // 아이디가 "btn"인 요소를 선택함. btn.addEventListener("click", clickBtn); // 선택한 요소에 click 이벤트 리스너를 등록함. btn.addEventListener("mouseover", mouseoverBtn); // 선택한 요소에 mouseover 이벤트 리스너를 등록함. btn.addEventListener("mouseout", mouseoutBtn); // 선택한 요소에 mouseout 이벤트 리스너를 등록함. function clickBtn() { // 버튼을 누를 시 삭제 btn.removeEventListener("mouseover", mouseoverBtn); //mouover 삭제 btn.removeEventListener("mouseout", mouseoutBtn); //mouseout 삭제 document.querySelector("#text").innerHTML = "이벤트 리스너가 삭제되었어요!"; } function mouseoverBtn() { document.querySelector("#text").innerHTML = "버튼 위에 마우스가 있네요!"; } function mouseoutBtn() { document.querySelector("#text").innerHTML = "버튼 밖으로 마우스가 나갔어요!"; } </script> </body> </html>⚙ 이벤트 핸들러 종류
너무 많아서 정리하기 힘들다.. 필요할 때 찾아서 쓰는 게 좋을 것 같다
//developer.mozilla.org/ko/docs/Web/Events
//www.ktword.co.kr/test/view/view.php?m_temp1=2744
Quiz
아래 예제의 button을 클릭했을 때 "코드스테이츠에 오신 것을 환영합니다"라는 안내창을 띄우기 위한 적절한 코드는?
function displayAlert() { alert('코드스테이츠에 오신 것을 환영합니다') } document.querySelector('#apply'). title = displayAlertdocument.querySelector('#apply').addEventListener('click', function(){ alert("코드스테이츠에 오신 것을 환영합니다") })Reference:
코드 스테이츠,
//www.tcpschool.com/javascript/js_event_eventListenerRegister