[ JavaScript ] JS jQuery 이벤트 (on API,이벤트 제거 , late binding selector, 다중 바인딩)

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

- jQuery 이벤트

 

 

 

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

 

 

 

<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>
    // 순수하게 구현했을 때
    var target = document.getElementById('pure');
    if(target.addEventListener){
        target.addEventListener('click', function(event){
            alert('pure');
        });
    } else {
        target.attachEvent('onclick', function(event){
            alert('pure');
        });
    }
 
    // jQuery를 사용했을 때
    $('#jquery').on('click', function(event){
        alert('jQuery');
    })
</script>

 

순수하게 구현했을 때와 jQuery를 사용했을때의 코드 분량에서 큰 차이가 있습니다.

 

 

 

jQuery는 크로스 브라우징을 알아서 처리해줍니다.

 

즉

 

이벤트를 보다 적은 코드로 구현할 수 있습니다.

 

 

이런 이유 때문에 jQuery와 같은 라이브러리를 사용합니다.

 

 

 

 

 

- onAPI 사용법

 

 

on 은 jQuery에서 가장 중요한 이벤트 API 라고 할 수 있습니다.

 

 

on API 를 통해서 jQuery 에서 이벤트를 다루는 방법을 알아보도록 합시다.

 

 

on 의 기본 형태는 아래와 같습니다.

 

 

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

 

 

 

• event : 등록하고자 하는 이벤트 타입을 지정합니다. (예: "click")
• selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링합니다.
• data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정합니다.
• handler : 이벤트 핸들러 함수를 의미합니다.

더 자세한 설명은 https://api.jquery.com/on/ 에서확인가능합니다.

.on() | jQuery API Documentation

 

 

- selector

 

 

 

selector 파라미터는 이벤트 대상을 필터링 합니다.

 

<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('ul').on('click','a, li', function(event){
        console.log(this.tagName);
    })
</script>

 

 

 ul 엘리먼트의 하위 엘리먼트 중에서 a, li 엘리먼트들에 대해서만 이벤트가 발생합니다.

 

여기서 ul 엘리먼트는 이벤트가 발생 하지 않습니다.

 

 jQuery에서 이벤트 버블링을 구현하는 방법입니다.

 

 

 

 

 

- late binding

 

jQuery에는 

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

 

 

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('ul').on('click','a, li', function(event){
        console.log(this.tagName);
    })
</script>
<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

 

 

 

 

 

 

위의 코드는 로그가 출력되지 않습니다.

 

ul 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문입니다.

 

 

 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('body').on('click','a, li', function(event){
        console.log(this.tagName);
    })
</script>
<ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

 

 

 

하지만 selector 를 이용하면 존재하지않는 엘리먼트에게도 이벤트를 동작시킬수 있습니다.

 

 

 

 

 

- 다중 바인딩

 

 

이번에는 하나의 엘리먼트에 여러개의 이벤트 타입을 동시에 하는것이 다중 바인딩입니다.

 

 

 

<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#target').on('focus blur', function(e){
        $('#status').html(e.type);
    })
</script>

 

 

on 에 공백으로 focus 와 blur 라는 이벤트 타입을 선택했습니다.

 

이렇게 공백으로 여러 개의 이벤트 타입을 등록할 수 있습니다.

 

 

 

 

 

<input type="text" id="target" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#target').on({
        'focus' : function(e){
 
        }, 
        'blur' : function(e){
             
        }
    })
</script>

이벤트에따라 핸들러를 유동적으로 실행할려면 위와같은 방식으로합니다.

 

 

 

 

- 이벤트 제거

 

 

이벤트를 제거할 때는 on 의 반대인 off 를 사용하면됩니다.

 

 

<input type="text" id="target"></textarea>
<input id="remove"  type="button" value="remove" />
<p id="status"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  var handler = function(e){
    $('#status').text(e.type+Math.random());
  };
  $('#target').on('focus blur', handler)
  $('#remove').on('click' , function(e){
    $('#target').off('focus blur', handler);
    console.log(32);
  })
</script>

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.