웹 개발/Javascript

[Javascript] 자바스크립트 이벤트(Event)

코딩하는흑구 2019. 4. 6. 22:34

Event, 이벤트


- BOM에서 다루는 이벤트

- 사건

- 사용자(사람)와 상호작용하면서 일어나는 사건 > 마우스(키보드,터치,음성..)를 조작하면 조작에 대한 반응

ex) 마우스 버튼 클릭 > 프로그램상에서 이벤트 발생(클릭) > 미리 준비해놓은 프로그래밍 코드 호출(실행)

이벤트 처리 방식

1. 정적 방식

- 태그의 속성으로 onXXX 속성을 사용하는 방식

- onXXX : 이벤트 핸들러(Event Handler)

2. 동적 방식 : DOM이나 JQuery 사용시 이벤트를 script에서 할당 가능.


body onload 이벤트

- 브라우저가 <body>태그의 모든 내용을 읽은 직후 발생하는 이벤트

- 브라우저가 모든 태그를 인식 가능한 상태 > 모든 태그에 접근 가능한 시점

- 사용자는 화면을 보기 직전 상태

- 페이지의 모든 태그를 초기화하는 역할

- 생성자 역할 이벤트


이벤트 예제( onclick )


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">
<style>
    
</style>
<script>
/* window.document.form1.btn6.value="Button6"; */
function test(){
    window.document.form1.btn1.value='Button1';
    window.document.form1.btn2.value='Button2';
    window.document.form1.btn3.value='Button3';
}
function init(){
    window.document.form1.btn6.value="Button6";
}
</script>
<title></title>
<link rel="stylesheet" href="/WebClientTest/css/css/basic.css">
</head>
<body onload="init();">
    <!-- ex09_event.htm -->
    <form name = "form1">
        <input type="text" name ="txt1" />
        <hr />
        <input type="button" value="버튼1" name="btn1" onclick="alert('안녕');"/>
        <input type="button" value="버튼2" name="btn2" onmouseover="alert('하이');"/>
        <input type="button" value="버튼3" name="btn3" onclick="window.document.form1.txt1.value='버튼3클릭';"/>
        <hr />
        <input type="button" value="버튼4" name="btn4" 
        onclick="window.document.form1.btn1.value='Button1';
                window.document.form1.btn2.value='Button2';
                window.document.form1.btn3.value='Button3'"/>
        <input type="button" value="버튼5" name="btn5" onclick ="test();"/>
        <input type="button" value="버튼6" name="btn6"/>
    </form>
</body>
</html>
cs


body onload = "init()" : onload는 페이지가 로드될 때 발생하는 이벤트로 init() 함수를 호출한다.

onclick : 클릭 이벤트가 발생했을 때 실행할 script 코드 혹은 함수를 적으면 된다. 해당 태그나 선택자가 클릭되어야 한다.




저작자표시