앞서 포스팅했던 이벤트 등록법은 순수 html 혹은 JavaScript를 이용한 방법이었습니다.
jQuery를 이용하면 아래와 같이 매우 간결하고 쉽게 이벤트 등록이 가능하므로,
매우 생산적! 이라고 할 수 있습니다. (프로그래머들은 간결한 것을 좋아하죠 :) )
opentutorials.org 사이트에서 참 많이 배우고 가는데요.
밑에 예시도 거기서 참조하였습니다. ㅎ
<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 { // for I.E8 이하
target.attachEvent('onclick', function(event){
alert('pure');
});
}
// jQuery를 사용했을 때
$('#jquery').on('click', function(event){
alert('jQuery');
})
</script>
** selector를 이용한 이벤트 등록
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<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>
** html 태그가 로딩되기 전에 script를 실행시키는 late binding
(onload 이벤트와는 다르다.)
<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>
** 다중 바인딩
1) 하나의 엘리먼트에 여러개 이벤트 등록
<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>
2) 이벤트에 따라 다른 핸들러 등록
<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>
3) chaining 기법도 가능
$('#target').on('focus', handler).on('blur', handler);
** 이벤트 제거 (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>
출처
https://opentutorials.org/module/904/6862
https://opentutorials.org/module/904/6888