jQuery의 메서드와 이벤트

💡깨달음💡/jQuery

jQuery의 메서드와 이벤트

과부하가즈아 2024. 2. 6. 16:25

jQuery' 메서드

jQuery 라이브러리가 제공하는 함수로, HTML요소를 선택하고 조작하는 함수를 의미한다. 일반적으로 선택된 요소의 스타일을 변경하거나 DOM구조를 조작하는데 사용된다.

jQuery' 이벤트

웹 페이지에서 발생하는 사용자와의 상호작용(클릭, 마우스 오버, 키 입력 등)에 반응하는 동작을 의미한다. 이벤트 핸들러를 등록하여 특정 이벤트가 발생했을 때 원하는 동작을 수행할 수 있다.

~~이벤트 처리를 위해 제이쿼리에서는 .on() 메소드를 사용한다.~~

✔️제이쿼리 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 연결한다.

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

$(document).ready(function() {
    $("button").click(function() {
        alert("버튼이 클릭되었습니다.");
    });
});

// 문서가 준비되면(document ready), 페이지 내의 모든 버튼 요소에 클릭 이벤트 핸들러를 등록
// 버튼을 클릭할 때마다 경고창이 뜬다.

$(function() {

    $("button").on({             // 모든 <button>요소에 설정하고 싶은 이벤트를 각각 작성

        mouseenter: function() { // mouseenter 이벤트를 설정
            $("#text").append("마우스가 버튼 위로 진입했어요!<br>");
        },

        click: function() {      // click 이벤트를 설정
            $("#text").append("마우스가 버튼을 클릭했어요!<br>");
        },

        mouseleave: function() { // mouseleave 이벤트를 설정
            $("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
        }

    });

});

  <body>
    <a class="show" href="#none">보이기</a>
    <a class="hidden" href="#none">감추기</a>
    <div>box</div>

    <!-- 제이쿼리 open source 파일 -->
    <script src="script/jquery-1.12.4.js"></script>
    <!-- 우리가 만드는 커스텀 js -->
    <script src="script/index.js"></script>
  </body>

a {
  text-decoration: none;
  color: black;

  /* a태그는 인라인 요소로 크기값을 지정할 수 없으니까 
  inline-block으로 속성을 바꿔주고 크기 값과 
  text를 중앙으로 배치해 준다. */
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 5px;

  background-color: beige;
}

div {
  height: 200px;
  width: 230px;
  background-color: aquamarine;
  margin-top: 10px;

  /* 정중앙에 오게 하게 */
  text-align: center;
  line-height: 200px; /*line-heignt를 높이만큼 설정해주기*/

  display: none;
}

$(".show").click(function () {
  $("div").show();
});

$(".hidden").click(function () {
  $("div ").hide();
});

  <body>
    <a class="btn" href="#none">보이기/감추기</a>
    <div>box</div>

    <!-- 제이쿼리 open source 파일 -->
    <script src="script/jquery-1.12.4.js"></script>
    <!-- 우리가 만드는 커스텀 js -->
    <script src="script/index.js"></script>
  </body>

$(".btn").mouseover(function () {
  $("div").show();
});
$(".btn").mouseenter(function () {
  $("div").show();
});

$(".btn").mouseleave(function () {
  $("div ").hide();
});

📌mouseover과 mouseenter의 차이

mouseover: 마우스 포인터가 요소 위에 올라갈 때마다 발생하는 이벤트로 해당 요소나 그 자식 요소 위를 지나갈 때마다 계속해서 발생한다. 따라서 요소 안에서 마우스를 움직일 때마다 이벤트가 발생한다.
mouseenter: 마우스 포인터가 해당 요소 위로 이동할 때만 발생하는 이벤트이다. 이벤트는 요소에 진입할 때 한 번만 발생하며, 해당 요소의 자식 요소 위로 이동하더라도 다시 발생하지 않는다. 즉, 요소 밖에서 요소로 이동할 때만 이벤트가 발생한다.

따라서, 이벤트 핸들링의 목적에 따라 두 이벤트 중 하나를 선택하여 사용할 수 있다. 만약 요소에 마우스가 올라갔을 때 한 번만 동작해야 한다면 mouseenter를 사용하고, 요소 안에서 마우스 움직임에 따라 반복적으로 동작해야 한다면 mouseover를 사용한다.