[jQuery] 제이쿼리 :: (3) 이벤트(Event)

소개순서

(1) 개념 및 기본 선택자

(2) 문서 객체 조작(DOM Control)

👉🏻 (3) 이벤트(Event)

(4) 효과(Effects)

---

 

◽ 이벤트(Event) 정의

웹 브라우저 내에서 벌어지는 버튼 클릭이나 마우스의 움직임등의 모든 행위를 '이벤트'라고 한다.

 

◽ 이벤트(Event) 종류

이벤트	설명
click()	선택 요소를 클릭했을 때 발생
dbclick()	이벤트 대상을 더블클릭했을 때 발생
mouseover()	마우스를 올려놓았을 때 발생
mouseout()	마우스가 벗어났을 때 발생
pocus()	대상에 포커스가 생겼을 때 발생
blur()	대상이 포커스를 잃었을 때 발생
focusin()	대상에 포함된 input 요소에 포커스가 있을 때 발생
focusout()	대상에 포함된 input 요소가 포커스를 잃었을 때 발생
keyup()	키보드에서 손을 뗐을 때 실행
keydown()	키를 눌렀을 때 발생하며 키보드를 누르고 있을 때 한번만 실행된다.
keypress()	키를 눌렀을 때 발생하며 키보드를 누르고 있을 때 계속 실행된다. * Ctrl, Alt, Shift는 작동하지 않는다.
mouseenter()	마우스가 선택 요소 내로 들어오면 발생
mouseleave()	마우스가 선택 요소에서 벗어나면 발생
mousemove()	마우스가 움직일 때 마다 발생
resize()	윈도우 창 사이즈를 조절할 때 마다 발생
submit()	양식 전송 버튼을 누를 때 발생
reset()	양식 취소 버튼을 누를 때 발생
toggle()	선택한 요소에 대해 지정된 함수를 차례대로 실행한다. // 지정된 함수를 차례대로 실행 $('#btn').toggle(function() { $(this).css('color', 'red'); }, function() { $(this).css('color', 'blue'); }, function() { $(this).css('color', 'green'); });​
hover()	마우스를 올렸을 때와 벗어났을 때 각각의 함수를 실행 // 예시 $('p').hover(over(), leave()); function over() { $(this).css('color','blue'); } function leave() { $(this).css('color','red'); }
unload()	문서를 종료했을 때 실행
change()	값이 바뀌고 포커스가 옮겨졌을 때 실행

 

 

 

출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

[w3schools] jQuery toggle() Method

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.