jQuery-07.event

이현주·2023년 10월 1일

web-frontend

목록 보기
21/26

이벤트

1. 이벤트 대상   : 이벤트가 동작하는 HTML 구성 요소
                     this(JavaScript 객체), 이벤트 객체의 target 속성
2. 이벤트 타입   : 이벤트 종류
3. 이벤트 리스너 : 이벤트가 발생하면 동작하는 함수
4. 이벤트 객체   : 발생한 이벤트의 상세 정보를 가지고 있는 객체

jQuery 이벤트

1. 현재 권장하지 않는 이벤트 메소드

1) bind()
2) live()
3) delegate()

2. 현재 사용하는 이벤트 메소드

1) on()
     (1) 표준 이벤트 모델이므로(addEventListener) 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.
     (2) 형식
        ① 일반적인 요소
          이벤트대상.on('이벤트타입', 이벤트리스너)
        ② 이벤트로 생성한 동적 요소
          부모요소.on('이벤트타입', 이벤트대상, 이벤트리스너)
2) one()
      (1) 한 번만 동작하는 이벤트를 작성할 수 있다.
      (2) 형식
        이벤트대상.one('이벤트타입', 이벤트리스너)
3) off()
      (1) 등록된 이벤트를 제거한다.
      (2) 형식
        이벤트대상.off('이벤트타입')
4) trigger()
      (1) 이벤트를 강제로 발생시킨다.
      (2) 형식
        이벤트대상.trigger('이벤트타입')
5) 이벤트타입이 곧 이벤트 메소드
      (1) 클릭이벤트 : 이벤트대상.click(이벤트리스너)
      (2) 변경이벤트 : 이벤트대상.change(이벤트리스너)
      (3) 키이벤트   : 이벤트대상.keyup(이벤트리스너)

이벤트 등록

<button id="btn">버튼</button>
  <script>
    $('#btn').on('click', function(){
      alert(this.textContent + ' 클릭했다.');  // JavaScript : JavaScript 객체 this의 textContent 속성
      alert($(this).text() + ' 클릭했다.');    // jQuery     : jQuery 객체로 바꾼 this의 text() 메소드
    })
  </script>

이벤트 등록

  <button class="btn_primary">버튼1</button>
  <button class="btn_primary">버튼2</button>
  <button class="btn_primary">버튼3</button>
  <script>

jQuery 이벤트 처리 : 이벤트 대상이 여러 개라도 for문 처리가 불필요함

$('.btn_primary').on('click', function(){
  alert($(this).text() + ' 클릭했다.');
})

JavaScript 이벤트 처리

  var btn_primary = document.getElementsByClassName('btn_primary');
  for(let i = 0; i < btn_primary.length; i++){
    btn_primary[i].addEventListener('click', function(){
      alert(this.textContent + ' 클릭했다.');
    })
  }

기본 이벤트 취소 : 이벤트 객체가 가지고 있는 preventDefault() 메소드 호출

  <div class="link">
    <a href="https://www.naver.com/">네이버</a>
    <a href="https://www.naver.com/">구글</a>
  </div>
  <script>
    $('.link > a').on('click', function(event){
      if($(this).text() === '구글'){
        alert($(this).text() + ' 클릭했다. 여긴 못 간다.');
        event.preventDefault();  // <a> 태그의 기본 이벤트를 막음(링크 이동을 막음)
        return;                  // 아래에 있는 코드는 더 이상 실행하지 않도록 막음(이벤트 리스너 종료시킴)
      }
      alert($(this).text() + ' 이동합니다.');
    })
  </script>

이벤트로 생성한 요소에 이벤트 등록하기

  <div>
    <button id="btn_static">버튼</button>
  </div>
  <div id="btn_area">

  </div>
  <script>
    $('#btn_static').on('click', function(){
      $('#btn_area').html('<button id="btn_dynamic">새버튼</button>');
    })
    $(document).on('click', '#btn_dynamic', function(){
      alert($(this).text() + ' 클릭했다.');
    })
  </script>

강제 이벤트 발생

   <div>
    <button id="btn1">버튼1</button>
    <button id="btn2">버튼2</button>
  </div>
  <script>

    // jQuery 객체 생성
    var btn1 = $('#btn1');
    var btn2 = $('#btn2');

    // btn1의 click 이벤트
    btn1.click(function(){
      alert($(this).text() + ' 클릭했다.');
    })

    // btn2의 click 이벤트 (btn2를 클릭하면 btn1을 클릭하시오.)
    btn2.click(function(){
      btn1.trigger('click');  // btn1의 click 이벤트를 강제로 발생시키시오.
    })

  </script>

[07_event.html]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../assets/js/lib/jquery-3.7.1.min.js"></script>
</head>
<body>

  
  <script>
    /*
      이벤트
      1. 이벤트 대상   : 이벤트가 동작하는 HTML 구성 요소
                         this(JavaScript 객체), 이벤트 객체의 target 속성
      2. 이벤트 타입   : 이벤트 종류
      3. 이벤트 리스너 : 이벤트가 발생하면 동작하는 함수
      4. 이벤트 객체   : 발생한 이벤트의 상세 정보를 가지고 있는 객체
    */
  </script>

  <script>
    /*
      jQuery 이벤트

      1. 현재 권장하지 않는 이벤트 메소드
        1) bind()
        2) live()
        3) delegate()
      2. 현재 사용하는 이벤트 메소드
        1) on()
          (1) 표준 이벤트 모델이므로(addEventListener) 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.
          (2) 형식
            ① 일반적인 요소
              이벤트대상.on('이벤트타입', 이벤트리스너)
            ② 이벤트로 생성한 동적 요소
              부모요소.on('이벤트타입', 이벤트대상, 이벤트리스너)
        2) one()
          (1) 한 번만 동작하는 이벤트를 작성할 수 있다.
          (2) 형식
            이벤트대상.one('이벤트타입', 이벤트리스너)
        3) off()
          (1) 등록된 이벤트를 제거한다.
          (2) 형식
            이벤트대상.off('이벤트타입')
        4) trigger()
          (1) 이벤트를 강제로 발생시킨다.
          (2) 형식
            이벤트대상.trigger('이벤트타입')
        5) 이벤트타입이 곧 이벤트 메소드
          (1) 클릭이벤트 : 이벤트대상.click(이벤트리스너)
          (2) 변경이벤트 : 이벤트대상.change(이벤트리스너)
          (3) 키이벤트   : 이벤트대상.keyup(이벤트리스너)
    */
  </script>


  <!-- 이벤트 등록 -->
  <button id="btn">버튼</button>
  <script>
    $('#btn').on('click', function(){
      alert(this.textContent + ' 클릭했다.');  // JavaScript : JavaScript 객체 this의 textContent 속성
      alert($(this).text() + ' 클릭했다.');    // jQuery     : jQuery 객체로 바꾼 this의 text() 메소드
    })
  </script>


  <hr>
  

  <!-- 이벤트 등록 -->
  <button class="btn_primary">버튼1</button>
  <button class="btn_primary">버튼2</button>
  <button class="btn_primary">버튼3</button>
  <script>
    
    /* jQuery 이벤트 처리 : 이벤트 대상이 여러 개라도 for문 처리가 불필요함 */
    $('.btn_primary').on('click', function(){
      alert($(this).text() + ' 클릭했다.');
    })

    /*
      JavaScript 이벤트 처리

      var btn_primary = document.getElementsByClassName('btn_primary');
      for(let i = 0; i < btn_primary.length; i++){
        btn_primary[i].addEventListener('click', function(){
          alert(this.textContent + ' 클릭했다.');
        })
      }
    */

  </script>


  <hr>


  <!-- 기본 이벤트 취소 : 이벤트 객체가 가지고 있는 preventDefault() 메소드 호출 -->
  <div class="link">
    <a href="https://www.naver.com/">네이버</a>
    <a href="https://www.naver.com/">구글</a>
  </div>
  <script>
    $('.link > a').on('click', function(event){
      if($(this).text() === '구글'){
        alert($(this).text() + ' 클릭했다. 여긴 못 간다.');
        event.preventDefault();  // <a> 태그의 기본 이벤트를 막음(링크 이동을 막음)
        return;                  // 아래에 있는 코드는 더 이상 실행하지 않도록 막음(이벤트 리스너 종료시킴)
      }
      alert($(this).text() + ' 이동합니다.');
    })
  </script>


  <hr>


  <!-- 이벤트로 생성한 요소에 이벤트 등록하기 -->
  <div>
    <button id="btn_static">버튼</button>
  </div>
  <div id="btn_area">

  </div>
  <script>
    $('#btn_static').on('click', function(){
      $('#btn_area').html('<button id="btn_dynamic">새버튼</button>');
    })
    $(document).on('click', '#btn_dynamic', function(){
      alert($(this).text() + ' 클릭했다.');
    })
  </script>


  <hr>


  <!-- 강제 이벤트 발생 -->
  <div>
    <button id="btn1">버튼1</button>
    <button id="btn2">버튼2</button>
  </div>
  <script>

    // jQuery 객체 생성
    var btn1 = $('#btn1');
    var btn2 = $('#btn2');

    // btn1의 click 이벤트
    btn1.click(function(){
      alert($(this).text() + ' 클릭했다.');
    })

    // btn2의 click 이벤트 (btn2를 클릭하면 btn1을 클릭하시오.)
    btn2.click(function(){
      btn1.trigger('click');  // btn1의 click 이벤트를 강제로 발생시키시오.
    })

  </script>


  <hr>


  <div class="post" data-post="1">
    <h1 class="title">제목1</h1>
    <div class="content">내용1</div>
    <input type="button" value="삭제" class="btn_remove1">
  </div>
  <div class="post" data-post="2">
    <h1 class="title">제목2</h1>
    <div class="content">내용2</div>
    <input type="button" value="삭제" class="btn_remove1">
  </div>
  <script>
    var btnRemove1 = $('.btn_remove1');
    btnRemove1.click(function(){
      alert($(this).closest('.post').data('post'));
    })
  </script>

  <hr>

  <div class="post">
    <h1 class="title" data-post="1">제목1</h1>
    <div class="content">내용1</div>
    <input type="button" value="삭제" class="btn_remove2">
  </div>
  <div class="post">
    <h1 class="title" data-post="2">제목2</h1>
    <div class="content">내용2</div>
    <input type="button" value="삭제" class="btn_remove2">
  </div>
  <script>
    var btnRemove2 = $('.btn_remove2');
    btnRemove2.click(function(){
      alert($(this).prevAll('.title').data('post'));
    })
  </script>

  <hr>

  <div class="post">
    <h1 class="title">제목1</h1>
    <div class="content" data-post="1">내용1</div>
    <input type="button" value="삭제" class="btn_remove3">
  </div>
  <div class="post">
    <h1 class="title">제목2</h1>
    <div class="content" data-post="2">내용2</div>
    <input type="button" value="삭제" class="btn_remove3">
  </div>
  <script>
    var btnRemove3 = $('.btn_remove3');
    btnRemove3.click(function(){
      alert($(this).prev('.content').data('post'));
    })
  </script>

  <hr>

  <div class="post">
    <h1 class="title">제목1</h1>
    <div class="content">내용1</div>
    <input type="button" value="삭제" class="btn_remove4" data-post="1">
  </div>
  <div class="post">
    <h1 class="title">제목2</h1>
    <div class="content">내용2</div>
    <input type="button" value="삭제" class="btn_remove4" data-post="2">
  </div>
  <script>
    var btnRemove4 = $('.btn_remove4');
    btnRemove4.click(function(){
      alert($(this).data('post'));
    })
  </script>

  <hr>

  <div class="post">
    <h1 class="title">제목1</h1>
    <div class="content">내용1</div>
    <input type="button" value="삭제" class="btn_remove5">
    <input type="hidden" value="1">
  </div>
  <div class="post">
    <h1 class="title">제목2</h1>
    <div class="content">내용2</div>
    <input type="button" value="삭제" class="btn_remove5">
    <input type="hidden" value="2">
  </div>
  <script>
    var btnRemove5 = $('.btn_remove5');
    btnRemove5.click(function(){
      alert($(this).next().val());
    })
  </script>


</body>
</html>

profile
이현주
졸려요
이전 포스트

jQuery-06.class

다음 포스트

jQuery-08.object

0개의 댓글