클릭 이벤트를 처리하고자 할때, jQuery를 통해 보다 쉽게 이벤트를 정의할 수 있습니다.
on(), click(), bind(), onclick()등 여러가지 방법이 있는데, 제가 주로 사용하는 on()과 click()의 차이에 대해 알아보겠습니다.
click()
단순하게 정적페이지에 로드된 요소에 클릭이벤트를 처리하고자 할때 click()메소드를 자주 사용합니다. 해당 클릭이벤트는 동적처리가 불가능합니다.
다음 예제를 확인해보겠습니다.
html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<button name='save'>저장</button><br/>
</body>
</html>javascript
$(document).ready(function () {
$("button[name='save']").click(function () {
$("body").append("click!!!<br/>");
});
});
name속성이 save인 button요소를 클릭하면 click()이벤트 처리로 body태그에 click!!!을 찍어냅니다.
on()
이번엔 on() 메소드입니다.
on() 메소드는 주체가 되는 부모속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있습니다.
물론 잘 못사용하면 click()이벤트처럼 정적으로 사용이 되므로 부모속성을 이용하여 처리한다는 이부분을 참고하셔야 합니다.
바로 예제를 확인해보겠습니다.
html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<button name='add'>+</button>
</body>
</html>javascript
$(document).ready(function () {
$(document).on("click", "button[name='add']", function () {
$("body").append("<button name='add'>+</button>");
});
});
ready안에 동작을 간단하게 설명해자면 HTML 내 클릭한 대상이 name값으로 add를 가지는 버튼 태그이면 body태그에 "+버튼"을 생성하는 예제입니다.
적용한 on()메소드의 파라미터를 확인해보겠습니다.
1. 첫번째 파라미터에는 행위(click, change, keypress 등)를 지정합니다. 이번 예제에서는 클릭을 처리하고 싶으므로 "click"으로 지정합니다.
2. 두번째 파라미터에는 지정자를 선택할 수 있습니다. name의 속성이 add인 버튼에 이벤트를 지정하고 싶으므로
"button[name='add']"으로 처리했습니다.
3. 세번째 파라미터는 구현부입니다. 콜백 메소드로 지정한 행위가 일어나면 콜백메소드에 정의한 내용이 동작합니다. body태그에 name속성이 add인 버튼을 생성하도록 append처리하였습니다.
동적으로 이벤트가 전부 할당되어 정상 동작하는 것을 볼 수 있습니다.
동적 이벤트 처리시 잘못된 방법
그럼 동적으로 처리하고자 할 때 잘못된 표현방법은 무엇일까요?
$("button[name='add']").on("click", function () {
$("body").append("<button name='add'>+</button>");
});
부모요소가 name값이 add인 버튼에 바로 클릭이벤트를 처리하였습니다.
결과는 아래와 같습니다.
이번엔 동일하게 on()메소드를 활용하였지만 동적으로 생성된 버튼은 동작하지 않습니다.
당연하게도 문서가 첫 로드되면서 이벤트는 현재 로드된 요소 중 name값이 add인 첫번째 버튼에만 클릭이벤트가 처리되고 이후에 동적으로 생성된 데이터는 연결되지 않았기 때문입니다.
이 부분을 유의해서 처리하시면 언제든지 동적으로 클릭이벤트뿐만 아니라 키이벤트 마우스이벤트등을 처리 할 수 있습니다.
출처 : https://myhappyman.tistory.com/123
'javaScript&jQurey' 카테고리의 다른 글
| [JS] 쿠키(Cookie) 다루기 (0) | 2022.08.22 |
|---|---|
| [javaScript]자바스크립트 타이머 - setTimeout, setInterval, clearInterval 함수 (0) | 2022.08.07 |
| fetch() 함수 사용법 (0) | 2022.03.03 |
| [jQuery]동적 태그에 이벤트 바인딩하기 (0) | 2022.02.15 |
| [jQuery] jquery로 라디오버튼을 재 클릭해서 체크 해제 (0) | 2021.11.16 |
