개발자의 길/Javascript

자바스크립트 이벤트(Event) 05

모쿠 2017. 4. 7. 16:12

<자바스크립트에서 이벤트 핸들러 등록 방법>

* 이벤트 핸들러 등록 방법1:

- element.event = function() {};


* 이벤트 핸들러 등록 방법 2:

- element.addEventListener(event, function, useCaption);

- event: 이벤트 이름(click, mouseover, ...)

- function: 이벤트 핸들러(리스너) -> 필수

- useCaption: true/false -> 선택(기본값은 false)

- 장점: 하나의 이벤트에 여러개의 이벤트 핸들러를 등록할 수 있음


<31_event5.html>


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
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
 
<h1>자바스크립트에서 이벤트 핸들러 등록 방법</h1>
<div id="output"></div>
<button id="btn1" type="button">버튼 1</button>
<input id="btn2" type="button" value="버튼2"/>
 
<script type="text/javascript">
var output = document.getElementById('output');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
 
btn1.onclick = function() {
    output.innerHTML = new Date().toLocaleString();    
};
 
function displayDate() {
    output.innerHTML = new Date().toLocaleString();
}
 
btn1.onclick = function() { alert('Hello~'); };
// 가장 마지막에 등록한 이벤트 핸들러만 동작
 
 
btn2.addEventListener('click', function() {
    alert('안뇽하세용~~');
});
 
btn2.addEventListener('click', displayDate);
 
</script>
</body>
</html>
cs



<출력화면>





저작자표시 비영리