-
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
반응형'코딩스터디 > Javascript' 카테고리의 다른 글
자바스크립트 ClassList (0) 2021.05.20 DOM, 요소의 태그 속성 접근하기(getAttribute 등) (0) 2021.05.20 innerText, innetHTML 차이 (0) 2021.05.19 자바스크립트 템플릿 리터럴 (0) 2021.05.19 DOM과 queryselector, querySelectorAll (0) 2021.05.18 댓글