JS : DOM 이벤트 기본, 이벤트핸들러 사용 법 / 이벤트 기초

JS : DOM 이벤트 기본, 이벤트핸들러 사용 법 / 이벤트 기초

---

자바스크립트 DOM 이벤트 1

자바스크립트 사용의 궁극적인 목적은 동적 웹 페이지의 작성입니다.

사용자가 웹 페이지를 클릭하거나 마우스를 이동하는 등의 경우 이벤트가 발생하며, 그에 반응하는 과정을 자바스크립트로 처리할 수 있습니다.

사용자가 HTML 요소를 클릭할때 코드를 실행하려면 자바스크립트 코드를 해당 HTML 이벤트 속성에 추가해야 합니다.

 

이벤트 활용 예시

• 웹페이지가 로드되었을 때
• 사용자가 마우스를 클릭하거나 요소 위로 또는 위에서 움직일 때
• 이미지가 로드되었을 때
• 입력필드가 변경되었을 때
• HTML 양식이 제출되었을 때
• 키보드를 사용할 때

 

이벤트 핸들러(처리기)란?

자바스크립트를 통해 제작한 이벤트가 발동하기 위해 사용자가 취해야하는 동작을 의미합니다.

 

이벤트 핸들러 종류

• mouseover / mouseenter 마우스가 요소에 올라갔을 때
• mouseout / mouseleave 마우스가 요소에 올라간 후 나갔을 때
• mousemove 마우스가 요소 위에서 움직였을 때
• mousedown 마우스로 요소를 눌렀을 때(마우스 이벤트 1단계)
• mouseup 마우스로 요소를 누르고 떼었을 때(마우스 이벤트 2단계)
• click 클릭했을 때(마우스 이벤트 3단계 mousedown -> mouseup을 연달아 실행가능)
• onfocus 폼 요소가 활성화되었을 때
• onload 문서를 읽었을 때
• ondblclick 마우스로 더블클릭 했을때
• onkeydown 키보드 키 눌렀을 때
• onkeypress 키보드 키 누르고 떼었을 때
• onkeyup 키보드 키 누르고 떼었을때(2단계)
• onchange input 요소의 값이 변경되었을 때
• onblur  input요소가 커서를 잃었을 때
• onfocus  input요소에 커서가 들어갔을 때
• onselect  텍스트 필드 등의 텍스트를 선택했을 때
• onsubmit  폼 제출버튼을 눌렀을 때
• onunloadWeb 웹페이지가 다른 페이지로 전환될 때
• onabort 페이지나 이미지의 로딩이 중단되었을 때
• onerror 페이지나 이미지를 로딩 중 에러가 발생했을 때
• onresize  HTML요소의 크기가 변경되었을 때

 

See the Pen JS-mouse-event-type by yuna122212 (@yuna122212) on CodePen.

 

 

 

---

 

 

이벤트 적용 예시

태그 내에 인라인방식으로 작성한 경우

<h1 onclick="this.innerHTML='제목1'">클릭하세요!</h1>
//사용자가 텍스트를 클릭하면 내용이 변경된다.

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'"> Mouse over this text </h1>

 

함수를 활용한 경우

See the Pen JS-event-function-ex by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

 

---

 

 

자바스크립트 DOM 이벤트 2

요소.addEventListener(이벤트종류, 함수실행 및 호출);

해당 이벤트 종류에는 on 접두어를 사용하지 않습니다.

'onclick' 대신 'click'을 사용합니다. 그 외 다른 마우스 이벤트도 동일합니다.

 

addEventListener메서드는 매개변수를 3개 사용합니다.

첫번째 매개변수는(이벤트)

두번째매개변수는 이벤트가 달성시 실행되는 함수,

세번째는 콜백함수로 필수가 아닌 선택값입니다.

 

addEventListener() 특징&활용도

• addEventListener () 메서드를 사용할 때 자바 스크립트는 HTML 마크 업과 분리되어 가독성을 높이고
  HTML 마크 업을 제어하지 않아도 이벤트 리스너를 추가 할 수 있습니다.
• addEventListener () 메서드를 사용하면 이벤트가 반응하는 방식을보다 쉽게 제어 할 수 있습니다.
• removeEventListener () 메서드를 사용하여 쉽게 이벤트 리스너를 제거 할 수 있습니다.

 

 

적용예시 ) myBtn을 클릭했을 때 displayDate함수를 호출합니다.

 

See the Pen JS-event-function-ex2 by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

(ES6) DOM 이벤트 선택 query Selector 

https://webty.tistory.com/110?category=885818 

javascript DOM querySelector