2021-01-21 HTML 마우스 이벤트
2021-01-21
HTML
3. 이벤트 흐름
- 발생한 이벤트는 타겟 객체에 전달된다.
- 발생한 이벤트는 window객체로부터 dom 트리를 타고 중간 DOM객체들을
거쳐 타겟 객체로 흘러가고,
다시 반대방향으로 이동하여 window객체에 도달한 후 없어진다.
- DOM 객체에 이벤트 리스너가 작성되어 있으면 모두 실행된다.
이벤트 흐름 2개 과정
- 캡쳐 단계
- window에서 타겟 객체까지 이벤트 객체가 전파되는 과정.
- window와 중간에 있는 모든 DOM 객체들을 거쳐 타겟 객체에 이벤트 객체가 전달된다.
- 갭쳐 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 흐름순으로 실행된다.
- 버블 단계
- 다시 타겟 객체에서 거꾸로 window까지 이벤트 객체가 전파되는 과정
- DOM 객체들은 동일한 이벤트에 대해 캡쳐 리스너와 버블 리스너 모두 가질 수 있다.
캡쳐 리스너와 버블 리스너
- 캡쳐 리스너와 버블 리스너 모두 가질 수 있기에 사용한다면 지정을 해야한다.
- addEventListener() 의 경우 3번째 매개 변수가 true 면 캡쳐 리스너,
- addEventListener() 의 경우 3번째 매개 변수가 false 면 버블 리스너
- addEventListener() 외 다른 방법으로 이벤트 리스너를 등록하는 경우 모두 버블 리스너로 자동 등록.
이벤트 흐름 중지
- stopPropagation() 메소드 호출
- 이벤트 삭제
마우스 핸들링
마우스 이벤트 객체의 프로퍼티
- x,y : 타겟 객체의 부모 객체 내에서의 마우스 좌표
- clientX, clientY : 브라우저 윈도우의 문서출력 영역 내에서의 마우스 좌표
- screenX, screenY : 스크린을 기준으로 한 마우스 좌표
- offsetX, offsetY : 타겟 객체 내에서의 마우스 좌표
- button : 0 : 아무 버튼도 눌리지 않음
1 : 왼쪽 버튼이 눌러졌음
2 : 오른쪽 버튼이 눌러졌음
3 : 왼쪽, 오른쪽 버튼이 모두 눌러졌음
4 : 중간 버튼이 눌러졌음
- wheelDelta : 양수 : 위쪽으로 굴린 경우(wheelDelta 값 : 120)
음수 : 아래쪽으로 굴린 경우(wheelDelta 값 : -120)
onclick ondblclick
- onclick : 사용자가 html 태그 클릭하였을 때
- ondblclick : 더블 클릭 하였을 때
onmousedown : html 태그에 마우스 버튼을 누르는 순간
onmouseup : 눌러진 마우스 버튼을 떼는 순간
onmouseover : 마우스가 html 태그 위로 올라오는 순간, 자식 영역 포함
onmouseout : 마우스가 html 태그 벗어나는 순간, 자식 영역 포함
onmouseenter : 마우스가 html 태그 위로 올라오는 순간. 버블 단계 없음
onmouseleave : 마우스가 html 태그 벗어나는 순간, 버블 단계 없음
onwheel : html 태그에 휠이 구르는 동안 계속 호출
onmousemove : 마우스가 움직이는 동안 계속 호출
oncontextmenu : 마우스 오른쪽 버튼 클릭 시 출력되는 메뉴(컨텍스트 메뉴)
문서와 이미지 로딩 onload
- 웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생한다
- 2가지 방법으로 작성 가능 둘 다 같다
- window.onload = "alert('onload')";
- <body onload = "alert('onload')">Author And Source
이 문제에 관하여(2021-01-21 HTML 마우스 이벤트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ksy1376/2021-01-21-HTML-마우스-이벤트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
