JavaScript - 이벤트 응용4 - jQuery 활용

앞서 포스팅했던 이벤트 등록법은 순수 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