개발자의 길/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 |
<출력화면>
- 초기화면
- 이벤트 동작 후
