티스토리 뷰
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> DOM 이벤트 연습</title>
<script>
const inputContainer = document.getElementById('input-container');
console.log(inputContainer);
document.addEventListener('DOMContentLoaded', e => {
const inputContainer = document.getElementById('input-container');
console.log(inputContainer);
const inputE1 = inputContainer.querySelector('input');
inputE1.addEventListener('keydown', e => {
console.log(`keyCode : ${e.keyCode}`);
});
const buttonE1 = inputContainer.querySelector('button');
buttonE1.addEventListener('click', e => {
console.log(e.target);
console.log(`input value : ${inputE1.value}`);
});
});
</script>
</head>
<body>
<div id='input-container'>
<input type='text'>
<button>버튼</button>
</div>
</body>
</html>
|
cs |
모든 요소는 이벤트를 발생시키는 addEventListener를 통하여서 해당 요소에서 발생하는 이벤트를 듣고 원하는 로직을 수행할수가 있다.
addEventListener는 첫번째 인자로 문자열을 전달하는데 이 문자열이 이벤트 종류이다.
두 번째 인자로 전달한 이벤트가 발생할 경우 호출될 함수를 전달한다.
이러한 함수를 리스너 함수라고 부른다. 이벤트 리스터 함수는 이벤트 객체를 매개변수로 가진다. 이벤트 객채에는 target, type과 같은 속성과 preventDefault와 stopPropagation과 같은 메소드가 있다.
27라인에서 볼수 있듯이 아이디가 input-container인 div 태그가 존재하지만 콘솔은 null로 출력된다. 브라우저가 26라인 DOM을 생성하기 전에 자바스크립트가 먼저 실행되어 이러한 문제가 발생한다.
DOM이 생성되기 이전에 자바스크립트 코드가 실행되는 문제를 해결하기 위해 DOMContentLoaded 이벤트를 이용할수 있다. 이 이벤트는 document에 직접 리스너 함수를 등록해야 한다. DOMContentLoaded 이벤트는 HTML 전체가 로드되고 DOM 트리가 완성되면 호출된다. 하지만 이때에는 이미지나 스타일시트와 같은 외부 리소스는 로드가 되지 않으 상태이다. 외부 리소스까지 로드가 된 이벤트를 처리할려면 onload 이벤트를 사용할수 있다.
input-container 아이디의 하위 요소 중 input 요소를 찾아 키다운 이벤트 리스너를 등록한다. 키보드의 키를 누를때 키다운 이벤트가 발생한다. 그리고 리스너 함수는 매개 변수로 이벤트 객체를 전달 받는데 이벤트 객체의 키코드 속성을 통해 유저가 어떠한 키를 눌렀는지 확인할수가 있다.
input-container 아이디의 하위 요소중 button 요소를 찾아 클릭 이벤트 리스너를 등록한다. 버튼 요소를 클릭하면 이벤트가 발생하고 리스너 함수가 호출된다. 이벤트 객체의 target속성은 클릭한 요소를 가리키고 버튼을 클릭하면 콘솔에서 입력한 값을 확인할수가 있다.
'Javascript' 카테고리의 다른 글
| DOM 이벤트 전파 제어 (0) | 2019.07.24 |
|---|---|
| DOM 이벤트 흐름 (0) | 2019.07.24 |
| DOM 이해하기 (0) | 2019.07.22 |
| Promise 이해하기 (0) | 2019.07.20 |
| setInterval에 관하여 (0) | 2019.07.20 |