자바스크립트 event(addEventListener, e.page),currentTarget

 

1. EVENT(이벤트)란?

[이벤트]

: 웹 브라우저나 사용자가 행하는 동작

: 웹 문서 영역안에서 이루어지는 동작만을 의미한다.

 

자바스크립트 프로그램 안에서 함수가 스스로 실행되는 경우는 많지 않다.

사용자가 어떠한 '동작'을 했을 때 실행되는 프로그램이 대부분이다.

 

여기서 사용자의 동작이 이벤트를 의미한다.

 

 

 

2. 마우스 이벤트

마우스에서 버튼이나 휠을 조작할때 발생하는 이벤트

속성	설명
click	마우스를 클릭했을때 이벤트 발생
dbclick	마우스를 두 번 클릭했을때 이벤트 발생
mousedown	마우스 버튼을 누르는 동안 이벤트 발생
mouseup	누르고있던 마우스 버튼에서 손을 땔 떼 이벤트 발생
mousemove	마우스를 움직일때 이벤트 발생
mouseover	마우스가 요소 위로 옮겨질때 이벤트 발생
mouseout	마우스가 요소를 벗어날때 이벤트 발생

 

 

 

3. 이벤트 처리하기

addEventListener()

: 한 요소에 여러 이벤트를 발생시킬때 사용하는 함수.

 

- addEventListener() 함수는 이벤트가 발생한 요소에 이벤트 처리기를 연결해주는 함수로,

이미지나 텍스트 등 특정 요소뿐만 아니라 Document 객체나 window객체 어디서든 사용할 수 있다.

 

 

addEventListener() 사용법

이벤트를 발생시킬 요소.addEventListener (이벤트 유형, 실행할 함수 이름, 캡쳐링 여부)
/* 캡쳐링 여부는 생략가능.  true = 캡쳐링, false = 버블링 */

 

+  e.preventDefault();

- preventDefault는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다.

- <a>, <input>, <textarea>의 기본동작을 막을 수 있습니다.

: a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본적인 기능을 가지고 있습니다.

: a태그는 클릭했을때 preventDefault() 메서드를 실행시켜 주면 페이지 이동을 하는 기본 기능을 막는 것입니다.

 

 

 

<이벤트 버블링>

- 각 이벤트가 한 요소에 국한되지 않고 중복되는 모든 요소에서 일어나는 현상

ex) 각 요소에 클릭 이벤트에 대한 이벤트 핸들러가 있으면 부모요소에도 계속 클릭 이벤트가 발생하는 것.

 

- currentTarget 프로퍼티는 실제로 그 이벤트가 등록된 요소가 어떤 요소인지 파악 가능함.

(이벤트 핸들러가 적용된 target에 접근하고 싶다면, target대신 currentTarget 프로퍼티를 사용)

 

 

 

 

 

 

4. 화면상에서 마우스 커서의 x축, y축 좌표구하기(e.pageX , e.pageY)

/* 브라우저상 마우스 커서의 x축 좌표 */
e.pageX

/* 브라우저상 마우스 커서의 y축 좌표 */
e.pageY

- e.pageX와 e.pageY는 브라우저상의 마우스 커서의 위치를 실시간으로 계산해주는 구문

- 주로 mousemove 이벤트와 같이 사용됩니다.

 

 

[유의할점]

- function()의 괄호 안에 'e' 를 설정해야만 mousemove 이벤트가 발생할 때마다

e.pageX로부터 실시간 마우스 좌표 값을 받을 수 있습니다.

 

 

 

 

5. 백분율 구하는 공식

(현재수치값 / 전체수치값) * 100

 

정수 : 소수점 이하가 없는 수

실수 : 소수점 이하가 있는 수

 

parseInt(변환할 수);

: 실수를 정수로 변환

 

 

 

_예제

 

 

 

 

 

 

 

[블로그참고]

https://blog.naver.com/jaeeun_98/222039460715

자바스크립트 addEventListener

 

https://blog.naver.com/jaeeun_98/222026721181

자바스크립트 Event정리

 

https://poiemaweb.com/js-event#53-addeventlistener-%EB%A9%94%EC%86%8C%EB%93%9C-%EB%B0%A9%EC%8B%9D

 

 

https://blog.naver.com/vam12/222352476352

인터랙티브 자바스크립트(이벤트 핸들러)

 

https://blog.naver.com/enfnql2/222271246947