해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: jQuery 이벤트
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와 같은 라이브러리를 사용하는 것입니다.
자바스크립트 기본 문법 :: onAPI 사용법
on 은 jQuery에서 가장 중요한 이벤트 API 라고 할 수 있습니다.
on API 를 통해서 jQuery 에서 이벤트를 다루는 방법을 알아보도록 합시다.
on 의 기본 형태는 아래와 같습니다.
.on( events [, selector ] [, data ], handler(eventObject) )
- event : 등록하고자 하는 이벤트 타입을 지정합니다. (예: "click")
- selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링합니다.
- data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정합니다.
- handler : 이벤트 핸들러 함수를 의미합니다.
selector
selector 파라미터는 이벤트 대상을 필터링 합니다.
위의 예제는 ul 엘리먼트의 하위 엘리먼트 중에서 a, li 엘리먼트들에 대해서만 이벤트가 발생합니다.
주의 할 것은 ul 엘리먼트는 이벤트가 발생하지 않는다는 점입니다.
이것은 jQuery에서 이벤트 버블링을 구현하는 방법이기도 합니다.
late binding
jQuery는 존재하지 않는 엘리먼트에도 이벤트를 등록할 수 있는 기능을 제공합니다.
<script src="//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 엘리먼트가 존재하지 않을 때 이벤트 설치를 시도하고 있기 때문입니다.
존재하지 않는 엘리먼트에 이벤트를 달 수 없다는 것은 이미 전 포스팅에서 다뤘었죠.
그런데 jQuery는 존재하지 않는 엘리먼트에게도 이벤트를 설치할 수 있습니다.
<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>