[Event] JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유

목차

1. Event 개념
2. 문서 객체 모델 (DOM: Document Object Model) 주요 이벤트
3. Event 구문
4. Event 메서드 종류
5. e 매개변수를 되도록이면 명시적으로 전달해야 하는 이유

Event 개념

 

1.
jQuery는 HTML 이벤트에 반응하도록 제작되었음. 

2.
HTML 이벤트란, 웹페이지의 반응을 유도하는 접속자들의 다양한 행동 (=action)을 말함.

(예)
ⓐ 해당 요소 위로 마우스 커서를 올리는 경우
ⓑ 라디오 버튼을 선택하는 경우 
ⓒ 해당 요소를 클릭하는 경우.

즉, 
$("선택자").이벤트(); 에서 이벤트 상황이 벌어졌을 때,
선택한 해당 선택자에 미리 정의해둔 메서드 (=메서드)이 일어나게 됨.

※ 「이벤트가 발생한다.」 / 「이벤트가 발생했다.」 표현을 자주 사용할테니, 잘 숙지하셈!!

(예)
키보드를 누르는 순간, 키보드 누르는 이벤트가 발생.
마우스를 클릭하는 순간, 마우스 클릭 이벤트가 발생.

 

문서 객체 모델 (DOM: Document Object Model) 주요 이벤트

 

$(document).ready()
웹페이지가 모두 랜더링 되었을 때 작동

 

---

click()
선택된 요소를 마우스 왼쪽 버튼이나 스크롤 바퀴 (=중앙 버튼) 클릭했을 때 작동.
※ 오른쪽 버튼 제외

dblclick()
선택된 요소를 마우스 왼쪽 버튼이나 중아 버튼으로 더블클릭했을 때 작동.

 

---

mouseenter()
선택된 요소 안으로 마우스 커서가 들어올 때 작동.

mouseleave()
선택된 요소 밖으로 마우스 커서가 벗어날 때 작동.

mousedown()
선택된 요소를 마우스 왼쪽, 중앙, 오른쪽 버튼 등으로 눌러졌을 때 작동.  
※ 오른쪽 버튼 포함

mouseup()
선택된 요소를 마우스 왼쪽, 중앙, 오른쪽 버튼 등으로 누른 걸 풀 때 작동해라.

 

---

hover()
선택된 요소 위로 마우스 커서가 들어올 때와 나갈 때 작동. 
※ hover() = mouseenter() + mouseleave()

focus()
선택된 폼 필드 요소가 focus (=현재 선택된 상태)일 때 작동.

blur()
선택된 폼 필드 요소가 focus (=현재 선택된 상태) 해제될 때 작동.

on()
선택된 요소에 하나 이상의 이벤트 메서드을 실행시킬 때 사용 함.

 

e 매개변수를 되도록이면 명시적으로 전달해야 하는 이유

[예제]

 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

$(document).on('click','.box',function(e){

    $(this).find('img.hz').replaceWith('<p">홈짱닷컴 Homzzang.com</p>');

});

</script>

<div class="box">

    <img src="https://i.imgur.com/WfW5mBC.png" alt="홈짱" class="hz">

</div>

 

결과보기

---

e 매개변수 의미

 

1. e 매개변수는 이벤트 객체임.

2. e 매개변수는 이벤트 트리거에 대한 정보를 담고 있음.
(예)

• 이벤트 유형 (click와 같은)
• 이벤트가 발생한 요소
• 마우스 좌표 (clientX 및 clientY)
• Ctrl, Shift, Alt와 같은 누른 키
• 마우스 버튼 정보 (which 속성)
• 등등

 

---

e 매개변수를 전달해야 하는 이유

 

당장의 코드엔 필요 없더라도, 코드 일관성과 추후 이벤트를 효과적으로 제어 가능하기 때문. (예)

• 기본 동작 방지: e.preventDefault()
• 이벤트 전파 중단: e.stopPropagation()
• 마우스 좌표 접근: e.clientX 및 e.clientY
• 수정 키 확인: e.ctrlKey 또는 e.shiftKey
• 등등