[Javascript & HTML] Event

[Event]

- 웹 페이지에서의 여러가지 동작 (상호작용)

- ex: 마우스 클릭, 키보드 클릭 ...

 

[마우스 이벤트]

- onclick : 마우스로 클릭

- ondblclick: 더블클릭

- onmouseup: 마우스 버튼을 올렸을 때

- onmousedown: 마우스 버튼을 눌렀을 때

 

[키보드 이벤트]

- onkeypress: 키보드가 눌려 졌을때 (눌렀다가 떼면 발생)

- onkeydown: 키보드를 누르는 순간 발생

- onkeyup: 키보드의 누르고 있던 키를 뗄 때 발생

 

[Frame(UI) 이벤트]

- onload: 모든 frame이 로딩 되었을 때

- onabort: 로딩하는 중 취소하여 중단 되었을 때

- onselect: 텍스트를 선택 했을때

 

[폼(form) 이벤트]

- form이 전송될 때에는 submit 이벤트가 발생

- form을 초기화 할 때는 reset 이벤트 발생

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

 

[인라인 이벤트 핸들러]

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

<div onclick="javascript:alert('안녕하세요');">클릭해보세요</div>

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

 

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

- javascript에서 이벤트 핸들러를 등록하는 방법

<div id="div1">클릭해보세요</div>

    

    <script type="text/javascript">

    document.getElementById("div1").onclick = function() {

        alert('안녕하세요');

    };

- 하나의 이벤트 핸들러만 바인딩 할 수 있다는 단점이 있음. (가장 마지막에 작성된 함수만 수행됨)

 

[addEventListener]

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

#장점

 - 하나의 이벤트에 하나 이상의 핸들러 추가 가능

 - 캡처링과 버블링 지원

 - HTML요수 뿐만 아니라 모든 DOM에 대해 동작

const btn = document.querySelector('#btn');
// 첫번째 바인딩된 이벤트 핸들러
btn.addEventListener('click', function () {
	alert('안녕하세요!!');
});
// 두번째 바인딩된 이벤트 핸들러
btn.addEventListener('click', function () {
	btn.style.color = 'purple';
	btn.style.fontSize = '30px';
	btn.style.fontWeight = 'bold';
});

- input.addEventListener('아이디', checkVal(상수)); => 이벤트 발생시까지 대기하지 않고 바로 실행됨.

- input.addEventListener('아이디', checkVal); => 이벤트 발생시까지 대기. 그러나 인자값 전달 안됨.

=> 해결책: input.addEventListener('아이디', function(){checkVal(상수)});

 

[버블링 & 캡처링]

- 캡쳐링: 이벤트가 발생한 요소를 부모부터 자식까지 검사 (부모->자식)

- 버블링: 이벤트가 발생한 요소부터 부모요소까지 올라가면서 검사 (자식->부모)

 

---

<요약>

- DOM에서 발생되는 이벤트에 대한 핸들러(리스너)를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다.

- 핸들러 등록은 HTML태그에 명시하는 방법과, JavaScript에서 DOM 검색후 등록하는 방법이 있다.