JavaScript Event - swkim0128/PARA GitHub Wiki

---

---

웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생.

사용자가 마우스를 클릭 하였을 때, 키보드를 눌렀을 때 등과 같이 다양한 종류의 이벤트가 존재.

JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행.

이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행. >> ==이벤트 핸들러 (Handler)==또는 ==이벤트 리스너(Lisstener)==라 하며 이 함수에 이벤트 발생시 실행해야 하는 코드 작성.

---

마우스 이벤트

웹 초기에는 load, click 등 소수의 이벤트만 사용.

마우스 이벤트는 웹 어플리케이션에서 가장 만히 사용하는 이벤트.

마우스 이벤트 핸들러에 전달되는 이벤트 객체에는 마우스 위치와 버튼 상태 등의 정보를 담고있다.

!Untitled 49.png

키보드 이벤트

키보드의 커서가 웹 브라우저에 나타나는 지범에서 키보드를 조작할 때 이벤트 발생.

키보드 조작은 운영체제에 영향을 받으므로 특정 키가 이벤트 핸들러에게 전달되지 않을 수 있다.

키보드 커서가 나타내는 요소가 없다면 document에서 이벤트가 발생.

!Untitled 1 27.png

Frame(UI) 이벤트

Frame 관련 이벤트는 특정 DOM 문서에 관련된 이벤트가 아니라 Frame 자체에 대한 이벤트.

Frame 이벤트 중에서는 load 이벤트가 가장 많이 사용.

load는 문서 및 자원들이 모두 웹 브라우저에 탑재되면 이벤트를 수행.

unload는 사용자가 브라우저를 떠날 때 이벤트가 발생하지만, 사용자가 브라우저를 떠나는 것을 막을 수는 없다.

!Untitled 2 26.png

폼(Form) 이벤트

Form 관련 이벤트는 웹 초기부터 지원되어 여러 웹 브라우저에서 가장 안정적으로 동작하는 이벤트.

자주 사용되는 이벤트로 form이 전송될 때에는 submit 이벤트가 발생.

Form을 초기화할 때는 reset 이벤트가 발생.

submit과 reset은 이벤트 핸들러에서 취소할 수 있다.

!Untitled 3 25.png

---

인라인 이벤트 핸들러

이벤트를 감지하고 대응하는 작업을 등록하는 방법은 여러가지 제공.

어떤 이벤트를 처리할 작업을 등록하는 것을 '이벤트 핸들러(혹은 리스너)를 등록한다.' 라고 표현

JavaScript의 초기에는 HTML 요소의 내부에서 직접 이벤트 핸들러를 등록.

이러한 방식은 HTML 코드를 JavaScript 코드가 침점한다는 문제가 있음.

!Untitled 4 21.png

이 방식의 경우 최근에는 사용하지 않음. 단, 기존의 코드에서 사용이 되었기에 알아 두어야 함.

여러 개의 함수를 한번에 호출 가능.

최근 관심 받고 있는 CBD(Component Based Development) 방식의 Angular / React / Vue.js와 같은 framewrok / libary에서는 인라인 방식으로 이벤트를 처리 (CBD에서는 html, css, js를 view의 구성 요소로만으로 보기 때문.)

!Untitled 5 19.png

이벤트 핸들러 프로퍼티 방식

HTML에 직접 이벤트 핸들러를 등록하는 방법 대신에 JavaScript에서 이벤트 핸들러를 등록하는 방법이 있다.

JavaScript에서 이벤트 핸들러를 등록함으로써 HTML코드와 JavaScript크도를 분리할 수 있다.

이벤트 대상이 되는 특정 DOM을 선택하고 이벤트 핸들러를 등록.

'div1' 요소(element)에 클릭 이벤트가 발생하면 핸들러로 등록한 함수가 실행.

!Untitled 6 16.png

인라인 이벤트 핸들러 방식처럼 HTML과 JavaScript가 혼용되어 있는 문제를 해결 할 수 있는 방식.

단, 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만을 바인딩 할 수 있다는 단점을 갖는다.

그러므로 아래의 예에서 첫번째 바인딩된 alert()은 실행되지 않는다.

!Untitled 7 14.png

addEventListener 메소드 방식

2000년에 발표된 DOM 레벨2 이벤트 명세의 addEventListener(arg1, arg2[, arg3])를 이용하여 좀 더 세밀한 이벤트 제어가 가능.

전달 인자의 첫 번째에는 이벤트 이름, 두 번째에는 이벤트 핸들러, 세 번째에는 캡쳐링 여부를 사용.

첫 번째 전달인자의 이벤트 이름에는 'on'을 제거한 이벤트 이름을 사용.

[주의!!] 이 방식은 Internet Expolorer 9 이전 버전에서는 사용 불가. >> attachEvent() 사용.

!Untitled 8 12.png

addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.

장점

• 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
• 캡처링과 버블링을 지원.
• HTML 요소 뿐만 아니라 모든 DOM(HTML, XML, SVG)에 대해 동작.

!Untitled 9 12.png

아래의 예제의 경우 요소의 값검사를 여러 개 해야 할 경우(공통 로직) 규칙이 바뀌게 되면 참조하고 있는 모든 곳의 소스를 바꿔야 한다. >> 해결 : 규칙에 해당하는 값을 인자로 받는 함수를 외부로 빼면 될까?

!Untitled 10 10.png

공통 규칙에 해당하는 값을 상수로 만들고 checkVal(인자)의 함수를 선언한 뒤 callback 함수 호출.

두 번째 매개변수의 함수를 직접 호출할 경우 이벤트 발생 시까지 대기하지 않고 바로 실행.

해결하기 위해 함수 호출이 아닌 함수 지정을 선택

해결은 되지만 인자를 전달 할 수 없다.

!Untitled 11 8.png

이벤트 핸들러 내부에서 함수를 호출하는 방식으로 인수 전달 해결.

!Untitled 12 8.png

---

이벤트가 발생한 요소를 포함하는 부모 HTML로부터 이벤트 근원지인 자식요소까지 검사하는 것을 캡쳐링이라 한다.

• 이벤트 캡쳐링에서 캡쳐속성의 이벤트 핸들러가 등록되어 있으면 수행.

이벤트 발생 요소부터 요소를 포함하는 부모요소까지 올라가면서 이벤트를 검사하는 것을 이벤트 버블링이라 한다.

• 이벤트 버블링에서 버블 속성의 이벤트 핸들러가 등록되어 있으면 수행.

!Untitled 13 8.png

함수의 세번째 인자 값이 true면 캡쳐링, false면 버블링

div3을 클릭했을 경우 결과.

• true(캡쳐링) : div1 > div2 > div3
• false(버블링) : div3 > div2 > div1

!Untitled 14 8.png

---

하나의 DOM 엘리먼트에 복수의 이벤트 핸들러를 등록할 수 있다.

마스가 특정 DOM 엘리먼트 영역 안으로 들어온 경우 mouseover 이벤트가 발생.

반대로 마우스가 특정 DOM 엘리먼트 영역 밖으로 나간 경우 mouseout 이벤트가 발생.

태그에 mouseover, mouseout 2가지 이벤트 핸들러를 등록.

!Untitled 15 7.png