[JavaScript] JavaScript - 이벤트

이벤트(Event)

: 이벤트는 간단하게 사용자의 어떠한 동작에 따라 기능이 실행되는 것을 의미합니다. 이벤트는 이벤트 대상, 이벤트 종류, 이벤트가 발생했을 때 실행되는 함수, 이 3가지로 구성되어 있습니다. 이벤트 대상은 특정 태그를 의미하고 이벤트의 종류는 click, drag, onmouse 등 여러 가지 종류가 있습니다.

 

 

1. window 객체의 load 이벤트 

load : 이벤트 이름 or 이벤트 타입
onload : 이벤트 속성
이벤트 핸들러 or 리스너 : 이벤트 속성에 할당된 함수
이벤트 모델 : 문서 객체에 이벤트 연결하는 방법
이벤트 연결 : window 객체의 onload 속성에 함수 자료형을 할당하는 것

 

* document - html의 명령어에 접근할 수 있는 태그의 느낌으로 알고 있으면 됩니다. 

 

 

<출력값>

 

header 에 onclick(이벤트 속성)을 연결 = 클릭하는 순간 이벤트 발생(whenClick)

 

 

 

 

2. 고전 이벤트 모델 

이벤트 속성을 이용해 이벤트 연결하고 자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법으로 이벤트 하나에 핸들러 하나만 연결할 수 있습니다. 

 

이벤트 해제의 방법 = null 을 넣으면 한번만 수행되고 수행되지 안습니다. 

<출력값>

 

null  값을 넣어주므로 click 선택했을 때 한번만 수행되어집니다. 

 

 

 

 

2.1 이벤트 발생 객체와 이벤트 객체 

 

counterA.innerHTML (=) 없이 단독으로 사용할 때, 현재 text에 있는 값을 읽어옵니다. 

 

 

<출력값>

 

 

 

2.2 이벤트 객체 사용 

이벤트 객체 내용 출력하는 예제

var event = e || window.event; 

e가 존재하면 e를 변수 event에 넣고, e가 undefined이면 window.event 속성을 변수 event에 넣음

인터넷익스플로러 8 이하 버전 
이벤트가 발생시 이벤트 객체 window.event 속성으로 전달
다른 브라우저는 이벤트핸들러의 매개 변수로 전달

- 8버전 이하는 함수의 (e) 를 event 에 전달 x , || windo .event를 넣음으로써 어떤 버전이든 수행될 수 있도록 합니다. 

 

 

 

 

 

3. 인라인 이벤트 모델 

- HTML 페이지의 가장 기본적인 이벤트 연결 방법.

- 태그 안에서 연결하는 방법으로 간단한 코드의 기능일 때 유효하며,  코드가 길어도 script 안에서 명시하고 이름으로만 추력 가능합니다. 그래서 3번째 방법을 제일 많이 사용합니다. 

 

<출력값> 

 

- InClick1 클릭

 

 

- InClick2 클릭

 

 

 

4. 기본 이벤트 제거 

기본 이벤트
일부 HTML 태그는 이미 이벤트 핸들러 가지고 있음
입력 양식의 경우 제거하는 방법

 

onsubmit 함수는 원래 무조건 서버로 전달하는 이벤트 이지만

return false;  - 서버로 전달하지 않습니다. 

return true; - 서버로 전달합니다. 

 

 

<출력값>

 

- 비밀번호 일치 

 

- 비밀번호 불일치

 

 

 

 

인라인 이벤트 모델의 이벤트 제거

 

태그에 직접적으로 연결

 

<출력값>

 

- 비밀번호 일치 

 

- 비밀번호 불일치

 

 

 

5. 이벤트 전달 

이벤트 버블링 방식이 일반적  : 자식노드 -> 부모 노드 순으로 이벤트 실행 (대부분)
이벤트 캡쳐링  : 이벤트가 부모 노드 -> 자식 노드 순으로 실행되는 것 (8버전 이하)

 

 

자식에서 발생된 이벤트를 부모에게 전달합니다. 

 

 

- 단, 자식에서 시작된 이벤트가 부모에서는 이벤트를 수행하고 싶지 않을 때 문제가 될 수 있습니다. 

 

 

 

 

6. 이벤트 전달 막기 예제

 

 

8버전 이하 : event.cancleBubble = true

대부분 : event.stopPropagation 

 

위의 코드는 어떤 버전이든 수용가능하게 하는 코드입니다.