Event(이벤트)
웹 페이지에는 사용자와의 상호작용(User Interaction)이 다양하게 존재한다.
상호작용은 크게 Event(이벤트)와 동작으로 구분할 수 있으며, 동작은 로직이나 함수로 구현한다.
이벤트(Event)란 어떤 사건을 의미한다. 사용자에 의해 발생하며 특정 요소와 사용자 사이의 상호작용을 의미한다. 예를 들어 사용자가 특정 버튼을 클릭했을 때, 특정 버튼에 마우스를 올려 놓았을 때, 키보드를 눌렀을 때, 화면 크기를 바꾸었을 때 그에 맞는 반응을 하여 사용자와 웹페이지가 상호 작용이 가능할 수 있게 만들어준다.
DOM을 사용하면 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있다. JavaScript에서 사용자에 의해 발생하는 이벤트를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그램을 작성하여야 한다.
1. 웹 이벤트 종류
clickdblclickmounsedownmouseentermouseleavemousemovemouseover- ...
- HTML DOM Events
2. addEventListener
addEventListener는 함수 HTML 요소에 이벤트를 적용할 때 사용하는 함수이다.
eventListener = 특정 HTML 요소에서 이벤트(event)가 언제 발생하는지 듣고 있다가(listener), 이벤트가 발생하면 인자(argument)로 받은 함수를 실행시켜준다.
사용 방식은 아래와 같다.
// ES5
요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});
// ES6
요소.addEventListener(이벤트종류, () => {
//이벤트가 일어났을 때 실행할 내용
});addEventListener함수에는 두 개의인자(argument)를 전달한다.- 첫 번째 인자 - 이벤트 종류
- 두 번째 인자 - 이벤트 발생 시 실행할 함수
- cf.
콜백함수(Callback Function): 인자로 전달된 함수
3. 클릭 이벤트
사용자가 버튼, 사진, 글 등을 클릭했을 때 이루어지는 이벤트이다. 웹사이트에서 이루어지는 이벤트 중 가장 많으며 웹 개발자는 요소마다 클릭 이벤트를 달아서 각자 이벤트에 맞는 reaction을 프로그래밍한다.
- 로그인 버튼 클릭 -> 로그인 API 호출
- 상품 사진 클릭 -> 상품 상세 화면으로 이동
- 자세히 보기 버튼 클릭 -> 팝업 화면 출력
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('회원가입 성공!!');
});4. 키 이벤트
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');- password라는 id를 가진 요소는 한 개 뿐이기 때문에
getElementById로 바로 해당 요소 사용.
pw.addEventListener('keydown', function(e) {
code.innerHTML = e.code;
});input#password요소에keydown이벤트를 감지하는eventListner추가- input에서 키보드를 입력하면 두번째 인자인 function이 실행됨. 따라서 키보드를 누르면
span#code의 내용에e.code가 들어가게 됨 - 여기에서
code는 입력된 키의 이름 정보를 의미
enter키의 code는 'Enter'이다. 따라서 enter키를 입력했을 때 로그인을 하기 위한 로직은 아래와 같이 작성할 수 있다.
pw.addEventListener('keydown', function(e) {
if (e.code === 'Enter') {
//로그인 함수로 이동
}
});클릭이벤트의 예시에는 두번째로 받는 함수에 e라는 인자가 없었지만 이번 예시에는 있다. 이와 같이 두번째로 인자로 들어오는 함수에서 항상 event와 관련된 정보를 인자로 받을 수 있다.
Assignment
이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.
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 을 통해 이벤트를 조금... 아주 조금... 더 알게 되었다!
