-
[TIL]Day 17. addEventListener 에 대해IT 지식 2020. 9. 23. 19:30728x90
자바스크립트의 활용성이 커짐에 따라 웹에서는 다양한 이벤트를 발생시킬 수 있게 되었습니다. 이러한 이벤트의 발전은 웹 개발을 프론트엔드와 백엔드를 분화시키는데 큰 기여를 하게 되었습니다.
오늘은 자바스크립트의 기능 중 이벤트를 달 때 사용하는 함수인 addEventListener에 대해 알아보도록 하겠습니다.
1. addEventListener란?
addEventListener는 앞서 말씀드렸다시피 이벤트를 달때 사용하는 함수입니다. 이 단어를 직역하자면, '이벤트를 듣고 있는 함수를 더해주겠다.'는 의미가 되죠. addEventListener는 개발자가 정한 특정 이벤트를 주시하고 있다가 그 이벤트가 발생할 때 인자로 받은 함수를 실행시켜줍니다.
예시를 들어보면 다음과 같습니다.
요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 });특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달합니다. 이렇게 인자로 전달된 함수를 콜백 함수라고 부릅니다.
2. 이벤트 종류
공식 문서에 나와있는 이벤트의 종류를 조금만 알아보도록 하겠습니다. 이벤트의 종류는 엄청나게 많지만, 그 중 자주 쓰이는 이벤트의 종류는 많지 않습니다. 마치 html의 태그 종류가 많지만, 자주 쓰이는 태그는 한정되어 있는 것처럼 말이죠.
그다지 많지 않다고 한 것은 교수님의 입장이었다... addEventListener에 위에 해당하는 이벤트를 인자로 받아 개발자가 원하는 함수를 작동시키게 되는 것입니다.
3. 예시
간단한 예시를 통해 addEventListener에 대해 좀 더 익숙해져보도록 하겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="login-container"> <input type="password" id="password" placeholder="비밀번호" /> <input type="password" id="re-password" placeholder="비밀번호 확인" /> <button class="login-btn">로그인</button> <p class="alert"></p> <p>key code: <span id="code"></span></p> </div> <script src="index.js"></script> </body> </html>* { box-sizing: border-box; } .login-container { width: 200px; margin: 20px auto; } .login-container input { width: 100%; height: 30px; margin-bottom: 5px; padding-left: 10px; } .login-btn { width: 100%; height: 30px; text-align: center; font-size: 14px; background-color: #659672; color: white; } .login-btn:hover { cursor: pointer; opacity: 0.85; }const thisIsRepassword = document.getElementById('re-password'); const thisIsAlert = document.getElementsByClassName('alert')[0]; thisIsRepassword.addEventListener('keyup', function() { const password = document.getElementById('password').value; const rePassword = document.getElementById('re-password').value; if (password !== rePassword) { thisIsAlert.innerHTML = "비밀번호가 일치하지 않습니다" } else { thisIsAlert.innerHTML = "" } });위의 코드를 실행시키면 초기 화면은 다음과 같습니다.
그리고 자바스크립트에 코딩되어 있는 것처럼 비밀번호와 비밀번호 확인 란에 password를 입력하면 두 요소의 value를 확인한 후 비교하여 값이 다르다면 아래의 첫 번째 사진이, 같다면 두 번째 사진과 같은 화면이 나오게 됩니다.
4. 마치며
오늘 예시로 들어드린 사례는 앞으로 우리가 마주쳐야할 이벤트의 시작에 불과합니다. 어쩌면 프론트엔드 개발자로서의 첫발을 내딛은 수준이라고도 할 수 있겠네요. 아직은 익숙하지 않아 다루는 것이 서툴지 몰라도 자주 연습하다보면 몰라보게 성장한 자신을 발견하게 되실 수도 있습니다.
결국 개발을 잘하는 왕도는 수많은 연습이라고 할 수밖에 없겠네요
제 심정이 반영되어 있네요 728x90'IT 지식' 카테고리의 다른 글
[TIL]Day 19. 문자 인코딩이란? (0) 2020.09.29 [TIL]Day 18. 라이브러리? 프레임 워크? (0) 2020.09.28 [TIL]Day 16. HTTP와 DOM의 개념 (0) 2020.09.22 [TIL]Day 15. JS 정리(2) (0) 2020.09.21 [TIL]Day 14. js 정리(1) (0) 2020.09.16