이벤트 관련 용어

• 이벤트 이름(Event Name), 이벤트 타입(Event Type)
• 이벤트 속성(Event Attribute)
• 이벤트 핸들러(Event Handler)
  
  

---

이벤트 핸들러 연결

• on()
  : 이벤트 핸들러 연결

• $(selector).on(eventName, eventHandler);$(selector).on(object);

$("#something).on("click", function () {
	...
});

$("#button").on({
  mouseenter: function () { $(this).addClass("reverse"); },
  mouseleave: function () { $(this).removeClass("reverse"); }
});

---

이벤트 메서드

• hover()
  : mouseenter 이벤트 핸들러와 mouseleave이벤트 핸들러를 동시에 연결

• $(selector).hover(eventHandler, eventHandler);

# hover 메서드의 첫 번째 매개 변수는 mouseenter 이벤트 핸들러
# hover 메서드의 두 번째 매개 변수는 mouseleave 이벤트 핸들러

$("#button").hover(
  function () { $(this).addClass("reverse"); },
  function () { $(this).removeClass("reverse"); }
);

---

이벤트 핸들러 연결 제거

• off()
  : 이벤트 핸들러 연결을 제거

• one()
  : 이벤트 핸들러를 연결하고 한 번 실행된 후 자동으로 제거

• $(selector).off();
• $(selector).off(eventName);
• $(selector).off(eventName, eventHandler);
  
  
• $(selector).one(eventName, eventHandler);
• $(selector).one(object);

$("#button").on("click", function() {
  alert("Hello World!");
  $(this).off();
});

$("#button").one("click", function () {
  alert("Nice to meet you!");
});

---

이벤트 객체

• 이벤트 객체(Event object)
  : 이벤트가 발생했을 때 이벤트와 관련된 정보를 담고 있는 객체
  : 이벤트 객체를 통해 이벤트의 상태 파악과 조작
  : jQuery메서드에서 사용하는 이벤트 객체는 JavaScript 이벤트 객체의 속성들을 정리해놓은 객체

• $(selector).on("click", function (event) {...});
• $(selector).on("click", function () {...});
  
  

---

jQuery 이벤트 객체의 속성

• event.type
  : 발생한 이벤트 타입

• event.which
  : 키보드나 마우스 이벤트에서 눌러진 버튼의 코드

• event.target
  : 이벤트가 발생한 DOM 요소

• event.pageX
  : 브라우저 화면을 기준으로 한 마우스의 X 좌표

• event.pageY
  : 브라우저 화면을 기준으로 한 마우스의 Y 좌표

• event.timeStamp
  : 이벤트가 발생한 시각 (ms)

---

이벤트 강제 발생

• trigger()
  : 이벤트 강제 발생

• #(selector).trigger(eventName);
• #(selector).trigger(eventName, data);

# trigger 메서드는 매개 변수로 넘긴 이벤트를 강제로 실행시킨다.

$("#button1").on("click", function () {
  alert("Hello World!");
  $("#button2").trigger("click");
});

$("#button2").on("click", function () {
  alert("Nice to meet you!");
});
  

---

Talk

JavaScript는 프론트와 백엔드(Node.js)를 모두 커버할 수 있는 언어이기 때문에
웹 개발 공부의 근간이 될 수 있다고 생각합니다.
첫단추에서 끝나지 않도록 노력하겠습니다.