티스토리 뷰

Frontend/jQuery

[생활코딩][웹브라우저JS] - jQuery 이벤트 관련 API

blueprint-12 2022. 2. 16. 22:57

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다.

 

이벤트 프로그래밍: jQuery와 none jQuery의 비교

<html lang="kr">
  <head>
    <title>jQuery와 none jQuery의 비교</title>
  </head>
  <body>
    <input type="button" id="pure" value="pure" />
    <input type="button" id="jquery" value="jQuery" />
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      // 순수하게 구현했을 때
      const target = document.getElementById("pure");
      /*if절은 addEventListener가 있는 지 확인하는 
      기능테스트 코드가 들어간다. */
      //IE의 구버전에는 attachEvent를 사용하기 때문에
      if (target.addEventListener) {
        target.addEventListener("click", function (event) {
          alert("pure");
        });
      } else {
        target.attachEvent("onclick", function (event) {
          alert("pure");
        });
      }

      // jQuery를 사용했을 때
      //.on메소드는 어떤 브라우저인지에 따라서 적당한 이벤트핸들러를 사용하도록함
      // 즉, 기능테스트 코드가 필요없음

      $("#jquery").on("click", function (event) {
        alert("jQuery");
      });
    </script>
  </body>
</html>

-> jQuery는 크로스 브라우징을 알아서 처리해주고 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. 

 

 

jQuery : on API 사용해보기 

▶기본 사용법

on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자.

.on( events [, selector ] [, data ], handler(eventObject) )
 

*jQuery 문법에서 []대괄호의 경우는 생략이 가능한 인자 뜻이다.

  • event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click")
  • selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함
  • data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함
  • handler : 이벤트 핸들러 함수
$("#jquery").on("click", function (event) {
        alert("jQuery");
      });

위의 예시에서 사용했던 jQuery 코드이다. 이 코드에서는 event, handler(eventObj)(){} 형식으로 사용되었으며 selector 와 data가 생략됐다.

 

selector

  • selector 파라미터는 이벤트 대상을 필터링한다. 
  • on API의 2번째 인자로 일종의 필터링 기능을 제공한다. -> 제외하는 것이 아니라 하위 엘리먼트에 국한해서 필터링
 <body>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $("ul").on("click", "a, li", function (event) {
        console.log(this.tagName); 
        /*여기서 this는 ul엘리먼트를 가리키는 것이 아니라 클릭이 발생한 
        엘리먼트 즉, a나 li엘리먼트를 가리킵니다.*/
      });
    </script>
  </body>

실행결과는 A, LI 가 출력됩니다. 위의 예제는 ul엘리먼트의 하위 엘리먼트 중에 a ,li 엘리먼트들(필터링 대상)에 대해서만 이벤트가 발생한다. 

주의할 점은 ul엘리먼트는 이벤트가 발생하지 않는다는 점이다.(그래서 핸들러 함수 내부의 this가 가리키는 것이 ul이 아니게 됩니다.) 이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 하다.

▶late binding

jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 기능을 제공한다.

->존재하지 않는 엘리먼트란 쉽게 말하면 script태그가 html요소들보다 위에 존재해서 아직 읽히지 않는 경우라든가 추후에 추가할 정말 존재하지 않는 엘리먼트를 말합니다. 존재하지 않는 엘리먼트에 이벤트를 달 수 없다는 것은 이미 배운 바가 있지만 jQuery를 사용하면 이벤트를 설치할 수 있다.

 

레이트 바인딩 적용 예시

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
     //html 요소들이 script태그보다 아래에 존재하기 때문에 작동 X 
     //ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있음
      $("ul").on("click", "a, li", function (event) {
        console.log(this.tagName + "I am on ul tag");
      });
      //late binding 을 통해 작동이 가능한 코드
      $("body").on("click", "a, li", function (event) {
        console.log(this.tagName + "I am on body tag");
      });
    </script>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </body>

결과물

->이벤트를 설치하는 대상이 'ul'아니라 'body'로 잡으면 이미 존재하는 엘리먼트에 대해서 이벤트를 설치하는 것이므로 body태그의 하위에 엘리먼트가 새롭게 추가되거나 나중에 읽히더라도 해당 엘리먼트에 대해서 이벤트를 설치할 수 있게 됩니다.

 

▶다중 바인딩

하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 등록하는 방법

 

1방법) on('event1 event2', function(e){  ...  })

  • 해당 방법은 여러 개의 이벤트 타입을 나열할 때에는 띄어쓰기로 구분합니다.
<body>
    <!--기능설명: 이벤트 타입에 따라 해당 이벤트 타입명을 p태그에 콘텐츠로 삽입-->
    <input id="target" />
    <p id="status"></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $("#target").on("focus blur", function (e) {
        //.html(htmlString): Set the HTML contetns of each element in the set of matched elements.
        $("#status").html(e.type);
      });
    </script>
  </body>​

 

2방법) on메소드의 인자로 객체를 주는 방법

 	//외부에 handler함수를 따로 만듦
    const handler = function (e) {
        $("#status").html(e.type);
      };
      
      $("#target").on({
        blur: handler,
        focus: handler,
      });

3방법) 체이닝 활용하기 

      const handler = function (e) {
        $("#status").html(e.type);
      };
      $("#target").on("blur", handler).on("focus", handler);

▶이벤트 제거

  • 제이 쿼리에서 이벤트를 제거할 때에는 .off()메소드를 사용합니다. 
  • .off("이벤트명") //이벤트 단일 작성 시, 해당 이벤트 핸들러가 다수여도 전부 삭제됩니다.
  • .off("이벤트명", 해당이벤트관련 함수명 or 함수) //이벤트에 여러 핸들러가 있는 경우, 두 번째 인자로 제거하길 원하는 이벤트 핸들러함수를 작성하면 해당 이벤트 핸들러만 삭제 가능합니다.
    • 아래의 예시에서는 $("focus blur", handler); $("focus", function(e){}); 로 focus이벤트에 2가지 이벤트 핸들러가 추가 되어 있는데 이 경우 첫번째 focus 이벤트 핸들러만 제거하고 싶다면 $("target").off("focus", handler); 해주면 됩니다.
<body>
    <input id="target" />
    <input id="remove" type="button" value="remove" />
    <p id="status"></p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      var handler = function (e) {
        $("#status").text(e.type + Math.random());
      };
      $("#target").on("focus blur", handler);
      $("target").on("focus", function (e) {
        //하나의 엘리먼트에 2개의 포커스 이벤트를 준 것 -> 
        //off() 를 사용해서 focus이벤트를 제거하면 2개에 해당하는 포커스 이벤트 핸들러가 전부 삭제됨
        alert(1);
      });
      //id가 remove인 버튼을 클릭했을 때, id가 타겟인 엘리먼트에 붙어있는  focus blur이벤트를 제거
      $("#remove").on("click", function (e) {
        $("#target").off("focus", handler);
        console.log(32);
      });
    </script>
  </body>

 

'Frontend > jQuery' 카테고리의 다른 글

[jQuery] 제이쿼리 recap  (0) 2022.04.28
[생활코딩][웹브라우저JS] - jQuery Ajax  (0) 2022.02.23
[생활코딩][웹브라우저JS]- jQuery의 node 제어 API  (0) 2022.02.08
[생활코딩][웹브라우저JS]- jQuery 속성(attr) 제어 API, jQuery 조회 범위 제한  (0) 2022.02.05
[생활코딩][웹브라우저JS]- jQuery 객체, jQuery API  (0) 2022.02.01
댓글