-
이벤트(event) [ 문서로딩, 마우스, jQuery 이벤트]JavaScript 2022. 3. 16. 12:54
<문서로딩>
: 웹페이지 제어하기 위해, 웹페이지의 모든 요소에 대한 처리가 끝났음을 알려주는 이벤트
* 보통방법 : <script>가 맨 마지막에 위치
☞ load : 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후 실행된다 -> 지연 (부작용)
* <head> 부분에 <script>위치, load이용
☞ DOMContentLoaded : load 개선, 스크립트 작업 할 수 있을 때 실행된다
<마우스>
☞ click : 클릭했을 때 발생
☞ dbclick : 더블클릭 했을 때
☞ mousedown : 마우스를 누를 때
☞ mouseup : 마우스버튼을 땔 때
☞ mousemove : 마우스를 움직일 때
☞ mouseout : 마우스가 엘리먼트에서 빠져나갈 때
☞ contextmenu : 컨텍스트 메뉴가 실행될 때
+ 키보드 조합 : 특수키가 눌려진 상태 감지
☞ event.shiftKey
☞ event.altKey
☞ event.ctrlKey
+ 마우스 포인터 위치
☞ event.clientX
☞ event.clientY
<jQuery 이벤트>
: jQuery 이용해 간단하게 표현 가능
<jQuery 기본 사용법>
☞ .on() API
.on( events [, selector ] [, data ], handler(eventObject) )
: event : 등록하고자 하는 이벤트 타입 지정 (click,dbclick 등)
: selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
: data : 이벤트가 실행될 때 핸들러로 전달될 데이터 설정
: handler : 이벤트 핸들러 함수
☞ selector : 이벤트 대상을 필터링한다
: ul의 하위 엘리먼트인 a, li 엘리먼트에만 이벤트 발생
: this == 해당 객체, 자기 자신, a,li
☞ late binding
: 존재하지 않는 엘리먼트에도 이벤트 등록 가능
: 원래 $('ul') 이였다면 ul 엘리먼트가 존재하지 않을때 이벤트를 시도하는거라 안되지만
-> $('body')로 바꾼다면 가능, body 엘리먼트는 이미 존재
☞ 다중 바인딩
: 하나의 엘리먼트에 여러개 이벤트 동시에 등록
: 이벤트 타입 focus, blur 두개 등록
* 각각 다른 핸들러 실행하고 싶다면 위와 같이 작성
☞ 이벤트 제거
: off 사용
: $('#target').off('focus blur', handler);
-> handler를 가지고 있는 이벤트만 삭제된다
: $('#target').off('focus blur');
-> focus, blur 이벤트 삭제
'JavaScript' 카테고리의 다른 글
button 태그가 무조건 submit 될 때 (0) 2022.05.12 이벤트(event) [등록 , 전파, 기본동작의 취소, 타입] (0) 2022.03.16 Document 객체, Text 객체 (0) 2022.03.16 Node 객체, 종류, 추가, 제거, 변경 (0) 2022.03.15 속성 API (0) 2022.03.14