일반적으로 프로그래밍 언어에서 이벤트(event)
라고 하면 사용자의 동작(마우스나 키보드를 누르는 등의 동작) 혹은 프로그램에서 발생하는 특정한 상황을 의미합니다. 이벤트가 발생하면 보통 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생합니다.
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
- 자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있음
- 입력양식으로부터 사용자의 입력값을 가져올 수 있음
- HTML 이벤트 속성은 자바스크립트 구문을 직접 실행하거나 함수를 호출할 수 있음
상호작용(User Interaction)
이 다양하게 존재합니다.이벤트
마우스를 드래그합니다. → 함수
박스가 움직입니다.이벤트
박스를 클릭합니다. → 함수
박스가 열립니다. → 함수
1초 후에 오리가 나옵니다.이벤트(Event)
상호작용(Interaction)
을 의미합니다.함수(Function)
이벤트(Event)
를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그램을 작성해야합니다.click
dblclick
mounsedown
mouseenter
mouseleave
mousemove
mouseover
addEventListener
함수는 HTML 요소에 이벤트를 적용할 때 사용하는 함수입니다.eventListener
= event
+ listener
(‘이벤트를 듣고 있다’)인자(argument)
로 받은 함수를 실행시켜줍니다.addEventListener
함수요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행될 함수
});
addEventListener
함수를 실행시키고(=호출하고) 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달합니다. addEventListener
함수에는 두 개의 인자(argument)
를 전달합니다.콜백함수(Callback Function)
: 인자로 전달된 함수완성된 jsfiddle 링크 - 여러분은 jsfiddle에서 직접 해보세요!
<h1>addEventListener</h1>
<button id="checkDateBtn">날짜 확인</button>
<p id="showDate"></p>
// 요소 획득
// id가 checkDateBtn인 요소를 가져온다 ("날짜확인"이라는 버튼)
const checkDateBtn = document.getElementById('checkDateBtn');
// id가 showDate 요소를 가져온다 (날짜 텍스트를 보여줄 p태그)
const showDate = document.getElementById('showDate');
// checkDateBtn 클릭 이벤트 감지(listen)
checkDateBtn.addEventListener('click', function() {
showDate.innerText = new Date(); // showDate 요소의 내용 >>> 현재 날짜 출력
});
click
’대신 ‘dbclick
’이나 ‘mouseenter
’등의 event로 바꿔보세요!event 함수를 추가하고 싶으면, 앞에서 배웠던 DOM에 접근해야 합니다. 그래서 DOM에 어떻게 접근하고, 어떻게 수정하는지 잘 알고 있어야 합니다.
const loginBtn = document.getElementsByClassName('login-btn')[0];
loginBtn.addEventListener('click', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if (!password) {
alert('비밀번호를 입력해주세요!');
return;
}
if (!rePassword) {
alert('비밀번호 확인을 입력해주세요!');
return;
}
if (password !== rePassword) {
alert('비밀번호가 맞지 않습니다!');
return;
}
alert('회원가입 성공!!');
});
한 줄씩 확인해보겠습니다.
const loginBtn = document.getElementsByClassName('login-btn')[0];
getElementsByClassName
함수로 login-btn라는 클래스 이름이 있는 요소를 찾습니다.
뒤에 [0]
은 왜 붙었을까요?
class 이름은 여러 요소에 중복해서 이름을 줄 수 있습니다. 그래서 getElementsByClassName
으로 요소를 찾으면 여러 요소가 담긴 배열이 반환됩니다.
해당 클래스 이름을 가진 요소가 하나 밖에 없으면, 요소가 하나인(배열 길이가 한 개인) 배열이 반환됩니다. 그렇기 때문에 첫 번째 인덱스에 접근하기 위해 뒤에 [0]
을 붙여 해당 요소에 접근했습니다.
그 요소에 addEventListener
를 달아줍니다. 첫 번째 인자에 'click'
이라고 세팅했습니다.
loginBtn.addEventListener('click', function() {
// click했을 때 실행될 기능
});
앞으로 loginBtn(.login-btn)
을 클릭(click 이벤트가 발생)하면,두 번째 인자로 넘긴 함수가 실행됩니다.
키 이벤트란, 키보드를 누르면 발생하는 이벤트입니다.
keydown
keypress
keyup
이 중 keydown
이벤트로 addEventListener
를 추가해봅시다.
const pw = document.getElementById('password');
const code = document.getElementById('code');
pw.addEventListener('keydown', function(event) {
code.innerHTML = event.code;
});
아까 getElementsByClassName
으로 요소를 찾으면 배열이 return 되어서 [0]
으로 접근해야 했는데, 이번에는 getElementById
로 바로 해당 요소를 사용할 수 있습니다.
왜냐하면, 문서 전체에서 id는 유일하게 사용되기 때문입니다.
const pw = document.getElementById('password');
input#password
요소에 keydown
이라는 이벤트를 감지하는 eventListener를 추가하였습니다.
pw.addEventListener('keydown', function(e) {
code.innerHTML = e.code;
});
input에서 키보드를 입력하면 두 번째 인자인 function이 실행됩니다. 그래서 키보드를 누르면 span#code
의 내용에 e.code
가 들어가게 됩니다. 여기서 code 는 입력된 키의 이름 정보를 의미합니다.
enter키의 code는 'Enter' 입니다. 따라서 enter키를 입력했을 때 로그인을 하기 위한 로직은 아래와 같이 작성할 있습니다.
pw.addEventListener('keydown', function(e) {
if (e.code === 'Enter') {
//로그인 함수로 이동
}
});
2-2 에서 클릭 이벤트를 했을 때는 두 번째 인자로 받는 함수에 e
라는 인자가 없었는데, 이번에는 추가했습니다. 이와 같이 두 번째 인자로 들어오는 함수에서 항상 event와 관련된 정보를 인자로 받을 수 있습니다.
console.log(e)
콘솔로 어떤 정보가 들어오는지 확인해 보세요!
출처 : wecode