🧀 [UIUX] 0213 JQUERY Coding, 제이쿼리 5일차

✏️ 2025. 02월 13일 / jQuery 5일차

🎉 제이쿼리 강제 이벤트
'이벤트가 강제로 발생했다'는 말은 '사용자에 의해' 이벤트가 발생한 것이 아니라
'핸들러에 의해' 이벤트가 발생한 것을 의미합니다.
즉, 사용자의 동작 없이 이벤트 핸들러가 실행되는 것을 뜻합니다.
강제 이벤트는 단독 이벤트 메서드를 사용하거나
trigger()이벤트 메서드를 사용하면 이벤트를 강제로 발생시킬 수 있습니다.
강제 이벤트는 먼저 이벤트 핸들러가 등록된 이후에 강제 발생시킬 수 있습니다.

      [기본형]
      - $("이벤트가 등록된 대상").이벤트명();
      - $("이벤트가 등록된 대상").trigger();

🎈 이벤트 제거 메서드
이벤트를 제거하는 메서드로는 off()가 있습니다.
on메서드로 등록한 이벤트나 단독이벤트를 삭제할 때 사용합니다.

      [기본형]
      $("이벤트가 등록된 대상").off("제거할 이벤트 종류");

💿 로딩 이벤트
로딩 이벤트는 사용자가 브라우저에서 html 문서를 요청하여
html 문서의 로딩이 완료되면 이벤트 핸들러를 실행합니다.
로딩 이벤트에는 ready()와 load()이벤트가 있습니다.
만약 페이지가 완전히 로드되기전에 에러가 발생한다면 error()메서드도 쓸 수 있습니다.
✔ ready()이벤트 메서드
ready()이벤트 메서드는 사용자가 사이트를 방문할때
요청한 html문서객체(document)의 로딩이 끝나면 이벤트를 발생시킵니다.
ready()이벤트의 주인은 document 객체 입니다.

      [기본형]
      $(document).ready(function(){ 코드 });
      $(document).on("ready", function(){ 코드 });

✔ load()이벤트 메서드
load()이벤트 메서드는 외부에 연동된 소스(img, iframe, video)의 로딩이 끝나면 이벤트를 발생시킵니다.
ready보다는 조금 느리게 실행됩니다.
load()이벤트의 주인은 window 객체 입니다.

      [기본형]
      $(window).load(function(){ 코드 });
      $(window).on("load", function(){ 코드 });

👀 마우스 이벤트
마우스 이벤트는 사용자가 사이트에서 마우스를 이용하여 취하는 모든 행위를 말합니다.
예를 들어 지정한 요소위에 마우스를 올리거나 클릭하는 등의 행위를 말합니다.
1. click() / dblclick() 이벤트 메서드
click() 이벤트는 사용자가 마우스로 어떤 요소를 클릭했을 때 이벤트가 발생하고,
dblclick() 이벤트는 사용자가 요소를 더블클릭했을 때 이벤트가 발생합니다.

      [기본형]
      $("요소").click(function(){ 코드 }) -> 단독이벤트
      $("요소").on("click", function(){ 코드 }) -> 그룹이벤트
      $("요소").click() -> 강제이벤트
      * dblclick()(더블클릭)메서드는 이벤트명만 다르고 기본형은 동일합니다.

✔ a, form 태그에 클릭이벤트 적용 시 기본이벤트 차단하기
a태그에 클릭이나 더블클릭을 등록하면,
클릭할 때마다 a태그의 링크 주소로 이동하는 문제가 발생합니다.
이 문제를 해결하려면 a태그에 기본 이벤트를 차단해야 합니다.
form 요소의 제출 버튼 (submit)도 action에 등록된 주소로 이동시키는 문제가 발생합니다.
등록한 이벤트를 정상 작동하게 하려면 기본 이벤트를 먼저 차단해주어야 합니다.

      [기본형]
      1. return false를 이용하는 방식
      $('a 또는 form').이벤트 메서드(function(){
        자바스크립트 코드;
        return false;
      })

      2. preventDefault를 이용하는 방식
      prevent = 막다, Default = 기본값
      $('a 또는 form').이벤트 메서드(function(event 또는 e){
        event.preventDefault();
        자바스크립트 코드;
      })

2. mouseover() / mouseout() / hover()
mouseover()는 요소 위에 마우스가 올라가면 이벤트를 발생시키고,
mouseout()는 요소 밖으로 마우스가 벗어나면 이벤트를 발생시킵니다.
hover()는 요소에 마우스가 올라갔을 때와 벗어났을 때의 이벤트를 각각 발생시키고,
이때 각각 다른 이벤트 핸들러를 실행시킵니다.

      [기본형]
      $("요소").mouseover(function(){ 코드 }) -> 단독
      $("요소").on("이벤트명", function(){ 코드 }) -> 그룹
      $("요소").mouseover() -> 강제
      * mouseout()은 이벤트 명만 다르며, 기본형은 모두 위와 같습니다.

      [hover 기본형]
      hover이벤트는 단독 이벤트 기본형만 있습니다.
      따라서 그룹 이벤트로는 등록이 불가능합니다.
      -----------------------------------------------------------------------
      - $("요소").hover(
          function(){ 마우스가 오버 되었을 때 실행될 코드 },
          function(){ 마우스가 아웃 되었을 때 실행될 코드 }
        )
      - $("요소").hover(); -> 강제

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)