Binary World

자바스크립트 이벤트(Event) 01 본문

개발자의 길/Javascript

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

모쿠 2017. 4. 7. 11:06

<자바스크립트의 이벤트 처리 방법>


1. HTML 태그안에서 이벤트 속성(attribute)에 이벤트 처리 코드를 직접 작성

2. HTML 태그의 이벤트 속성에 함수를 설정하고, script에서 함수를 구현

3. script 안에서 이벤트 리스너(핸들러)를 등록



<27_event1.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
40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
 
<h1>JavaScript를 사용한 HTML 이벤트 처리</h1>
 
<p onclick="style.backgroundColor='pink'; style.color='green'">onclick 이벤트에서 코드를 직접 작성</p>
<p onclick="alert('Hello~~')">다이얼로그(pop-up) 띄우기</p>
<p id="para" onclick="change(this)">onclick 속성에서 JS 함수 호출</p>
<p id="para2">script에서 이벤트 리스너를 등록</p>
 
<script type="text/javascript">
function change(para){
    // var para = document.getElementById('para');
    // content 변경: innerHTML
    para.innerHTML = 'Hello';
    // stlye 변경: style.property
    para.style.border = '2px solid grey';
    para.style.backgroundColor = 'lavender';
    para.style.color = 'white';
    para.style.fontSize= '2em'; // 1em: 브라우저에서 설정된 기본 폰트 크기
    para.style.margin = '50px';
}
 
var para2 = document.getElementById('para2');
// HTML element에 이벤트 핸들러 등록
para2.onclick = function() {
    para2.innerHTML = '바뀔까?';
    para2.style.fontSize = '3em';
    para2.style.fontWeight = 'bold';
};
 
</script>
 
</body>
</html>
cs



<출력화면>


- 초기화면


- 이벤트 동작 후


저작자표시 비영리

'개발자의 길 > Javascript' 카테고리의 다른 글

자바스크립트 이벤트(Event) 03  (0) 2017.04.07
자바스크립트 이벤트(Event) 02  (0) 2017.04.07
자바스크립트 요소(Element) 찾기  (1) 2017.04.06
자바스크립트 DOM(Document Object Model)  (0) 2017.04.06
자바스크립트 날짜표현(Date)  (0) 2017.04.06
'개발자의 길/Javascript' Related Articles more
Comments