jQuery 클릭이벤트
클릭 이벤트를 처리하고자 할 때, jQuery를 통해 보다 쉽게 이벤트를 정의할 수 있다. 이벤트처리 메서드는 on(), click(), bind(), onclick()등 여러가지가 있지만 이번 포스팅에서는 on()과 click()의 차이와 클릭이벤트의 동적처리에 대해 다루어 보았다.
.click()
- syntax
.click(function(){}) .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 한다.- 예제
<body>
<button value="click_btn">click me!</button><br />
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function () {
$("button[value='click_btn']").click(function () {
$('body').append('Thank you<br/>');
});
});
</script>
</body>value값이 click_btn인 버튼을 클릭하면.click() 이벤트 처리기로 body에 Thank you을 찍어내는 코드를 작성할 수 있다.
실행하면 아래와 같이 작동한다.
.on()
-
syntax
.on( events [, selector ] [, data ], handler(eventObject) ) -
.on()은 주최가 되는 부모속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있다. -
예제
<body>
<button name='add'>+</button>
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", "button[name='add']", function() {
$("body").append("<button name='add'>+</button>");
});
});
</script>
</body>HTML 내부의 name값이 add인 버튼 태그를 클릭했을 때 body태그에 "+버튼"을 생성한다. 인자를 살펴보자면 아래와 같다.
-
첫번째 인자에는 행위(
click,change,keypress등)를 지정한다. 이번 예제에서는 클릭을 처리하고 싶으므로click으로 지정한다. -
두번째 인자에는 지정자를 선택할 수 있다. name의 속성이 add인 버튼에 이벤트를 지정하고 싶으므로
"button[name='add']"으로 처리했다. -
세번째 인자는 실행문이다. 콜백 함수로 지정한 행위가 일어나면 콜백함수에 정의한 내용이 동작한다. body태그에 name속성이 add인 버튼을 생성하도록
append처리하였다.실행하면 아래와 같이 작동한다.
동적 이벤트 바인딩
JS코드와 jQuery코드는 대부분 이벤트(event)에 의해 동작한다. 이벤트란 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 뜻하는데, 이벤트 바인딩이란 선택한 요소와 이벤트를 연결해주는 것을 의미한다.
이벤트 바인딩(event binding)은 아래와 같은 과정으로 이루어 진다.
- 이벤트를 받아 줄 요소를 선택한다.
- 선택한 요소가 어떤 이벤트에 반응할지, 즉 요소와 이벤트를 연결해주는 바인딩을 한다.
- 이벤트가 발생했을 때 실행될 코드를 작성한다.
동적 이벤트 바인딩(dynamic event binding)이란, 동적으로 생성된 요소에 이벤트를 바인딩 한다는 뜻이다. 위의 예시에 경우 "<button name='add'>+</button>"처럼 동적으로 생성된 Element에 click 이벤트를 걸어주는 것이 대표적 예시이다.
[참고]
https://api.jquery.com/on/
https://myhappyman.tistory.com/123
