웹 페이지에는 사용자와의 상호작용(User Interaction)이 다양하게 존재한다.
상호작용은 크게 Event(이벤트)와 동작으로 구분할 수 있으며, 동작은 로직이나 함수로 구현한다.
이벤트(Event)란 어떤 사건을 의미한다. 사용자에 의해 발생하며 특정 요소와 사용자 사이의 상호작용을 의미한다. 예를 들어 사용자가 특정 버튼을 클릭했을 때, 특정 버튼에 마우스를 올려 놓았을 때, 키보드를 눌렀을 때, 화면 크기를 바꾸었을 때 그에 맞는 반응을 하여 사용자와 웹페이지가 상호 작용이 가능할 수 있게 만들어준다.
DOM을 사용하면 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있다. JavaScript에서 사용자에 의해 발생하는 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그램을 작성하여야 한다.
click
dblclick
mounsedown
mouseenter
mouseleave
mousemove
mouseover
addEventListener
는 함수 HTML 요소에 이벤트를 적용할 때 사용하는 함수이다.
eventListener
= 특정 HTML 요소에서 이벤트(event
)가 언제 발생하는지 듣고 있다가(listener
), 이벤트가 발생하면 인자(argument)
로 받은 함수를 실행시켜준다.
사용 방식은 아래와 같다.
// ES5
요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});
// ES6
요소.addEventListener(이벤트종류, () => {
//이벤트가 일어났을 때 실행할 내용
});
addEventListener
함수에는 두 개의 인자(argument)
를 전달한다.콜백함수(Callback Function)
: 인자로 전달된 함수사용자가 버튼, 사진, 글 등을 클릭했을 때 이루어지는 이벤트이다. 웹사이트에서 이루어지는 이벤트 중 가장 많으며 웹 개발자는 요소마다 클릭 이벤트를 달아서 각자 이벤트에 맞는 reaction을 프로그래밍한다.
event 함수를 추가할 때에는 DOM에 접근해야 한다.
// HTML
<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>
// javascript
const loginBtn = document.getElementsByClassName('login-btn')[0];
// login-btn라는 클래스 이름이 있는 요소 찾기
loginBtn.addEventListener('click', function() {
//click했을 때 실행될 기능
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('회원가입 성공!!');
});
keydown
: 키보드를 눌렀을 때 발생keypress
: 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생keyup
: 키보드를 누르고 떼는 순간 발생// keydown 이벤트 예시
const pw = document.getElementById('password');
const code = document.getElementById('code');
pw.addEventListener('keydown', function(e) {
code.innerHTML = e.code;
});
위 코드를 하나씩 뜯어서 보자면,
const pw = document.getElementById('password');
getElementById
로 바로 해당 요소 사용.pw.addEventListener('keydown', function(e) {
code.innerHTML = e.code;
});
input#password
요소에 keydown
이벤트를 감지하는 eventListner
추가span#code
의 내용에 e.code
가 들어가게 됨code
는 입력된 키의 이름 정보를 의미enter키의 code는 'Enter'이다. 따라서 enter키를 입력했을 때 로그인을 하기 위한 로직은 아래와 같이 작성할 수 있다.
pw.addEventListener('keydown', function(e) {
if (e.code === 'Enter') {
//로그인 함수로 이동
}
});
클릭이벤트의 예시에는 두번째로 받는 함수에 e
라는 인자가 없었지만 이번 예시에는 있다. 이와 같이 두번째로 인자로 들어오는 함수에서 항상 event와 관련된 정보를 인자로 받을 수 있다.
이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.
input#re-password
에keyup
이벤트를 추가해주세요.input#password
와input#re-password
의value
속성을 통해 input에 작성된 값을 가져오고,- 서로 같은지 아닌지 확인해서 같지 않다면
<p>
태그의.alert
클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣어주세요.- 서로 비밀번호가 같다면
""
빈 문구를 넣어주시면 됩니다.
내가 작성한 코드는 아래와 같다.
const reP = document.getElementById('re-password');
reP.addEventListener('keyup', function() {
const pwV = document.getElementById('password').value;
const repwV = document.getElementById('re-password').value;
if (pwV !== repwV) {
document.querySelector('.alert').innerHTML = "비밀번호가 일치하지 않습니다";
} else {
document.querySelector('.alert').innerHTML = "";
}
})
하나씩 뜯어 보자면,
input#re-password
에 keyup
이벤트를 추가하기 위해 getElementById
를 활용하여 re-password
요소를 찾는다.const reP = document.getElementById('re-password');
input#password
와 input#re-password
의 value
속성을 통해 input에 작성된 값을 가져온다.const pwV = document.getElementById('password').value;
const repwV = document.getElementById('re-password').value;
<p>
태그의 .alert
클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣고 서로 비밀번호가 같다면 ""
빈 문구를 넣는다. if (pwV !== repwV) {
document.querySelector('.alert').innerHTML = "비밀번호가 일치하지 않습니다";
} else {
document.querySelector('.alert').innerHTML = "";
}
})
22/11/16 추가
이벤트는 여전히 어렵다. 평소에 자주 접하지 않은 거라 그런지 오랜만에 보니 머리가 씻겨 나간 것 처럼.... 기억나지 않는 게 꽤 많았다. 그래도 전에는 읽으면서 '이 뭔 개소리야?!'라는 표정으로 글을 읽었는데 이번엔 '으응... 으으응...' 이러면서 읽었다..😭 (다시 보니 전에 작성한 코드는 이벤트를 추가하지 않았었다... 😅)
다시 써본 코드는 아래와 같다!
const pw = document.getElementById('password')
const rpw = document.getElementById('re-password')
function pwCheck () {
pV = pw.value;
rV = rpw.value;
if (pV === rV) {
document.querySelector('.alert').innerText = ""
}
else {
document.querySelector('.alert').innerText = "비밀번호가 일치하지 않습니다."
}
}
rpw.addEventListener('keyup', pwCheck)
참고하면 좋은 영상
https://www.youtube.com/watch?v=DzZXRvk3EGg 을 통해 이벤트를 조금... 아주 조금... 더 알게 되었다!