[자바스크립트]jquery 이벤트 종류

jquery는 버튼과 마우스 등의 어떤 행위에 대한 이벤트를 제어하는 기능이 있습니다.

그 이벤트의 종류와 예제를 보여 드리고자 합니다.

 

클릭 이벤트 (Click Event)
설명: 사용자가 요소를 클릭할 때 발생합니다. 아래는 버튼을 클릭 했을때의 예제입니다.

$("#button").on('click', function() {
  alert("버튼이 클릭되었습니다!");
});

 

마우스 엔터 이벤트 (Mouse Enter Event)
설명: 마우스 포인터가 요소 위로 올라갔을 때 발생합니다.

$("#div").on('mouseenter', function() {
  $(this).css("background-color", "lightgray");
});

 

키 다운 이벤트 (Key Down Event)
설명: 사용자가 키보드의 키를 누를 때 발생합니다.

$(document).keydown(function(event) {
  alert("눌러진 키: " + event.key);
});

 

포커스 아웃 이벤트 (Focus Out Event)
설명: 요소가 포커스를 잃었을 때 발생합니다.

$("#input").focusout(function() {
  alert("포커스를 잃었습니다!");
});

 

체인지 이벤트 (Change Event)
설명: 폼 요소의 값이 변경됐을 때 발생합니다. (예: 입력 필드, selectbox선택 상자)

$("#select").change(function() {
  var selectedOption = $(this).children("option:selected").val();
  alert("선택된 옵션: " + selectedOption);
});

 

서브밋 이벤트 (Submit Event)
설명: 폼이 제출될 때 발생합니다.

$("#form").submit(function(event) {
  event.preventDefault(); // 폼의 기본 제출 동작을 막습니다.
  alert("폼이 제출되었습니다!");
});

 

이벤트가 중첩 발생 시

이벤트가 중첩되어 발생하는 경우, 즉 여러 요소가 겹쳐 있고 각각에 이벤트 핸들러가 부착되어 있을 때, 이벤트 버블링(event bubbling) 또는 이벤트 캡처링(event capturing)이 발생할 수 있습니다. 이러한 상황을 제어하기 위해 주로 사용하는 방법은 다음과 같습니다.

 

이벤트 버블링(Event Bubbling) 제어
이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, DOM 트리를 따라 상위 요소로 전파되는 현상입니다. 이를 제어하기 위해 event.stopPropagation() 메서드를 사용할 수 있습니다.

$("#child").click(function(event) {
  event.stopPropagation(); // 이벤트 버블링을 중단
  alert("자식 요소가 클릭되었습니다!");
});

$("#parent").click(function() {
  alert("부모 요소가 클릭되었습니다!");
});