.click()
.click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다.
문법
.click( handler )예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다.
$( 'button' ).click( function() {
// function
} );
예제
<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>$(document).ready(function () {
$("button[name='save']").click(function () {
$("body").append("click!!!<br/>");
});
});
name속성이 save인 button요소를 클릭하면 click()이벤트 처리로 body태그에 click!!!을 찍어냅니다.
on()
이번엔 on() 메소드입니다.
on() 메소드는 주체가 되는 부모속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있습니다.
물론 잘 못사용하면 click()이벤트처럼 정적으로 사용이 되므로 부모속성을 이용하여 처리한다는 이부분을 참고하셔야 합니다.
바로 예제를 확인해보겠습니다.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<button name='add'>+</button>
</body>
</html>$(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처리하였습니다.
'JavaScript > jQuery' 카테고리의 다른 글
| jQuery - 기초 (0) | 2022.11.03 |
|---|---|
| jQuery - .attr() 함수 (0) | 2022.09.04 |
| jQuery - 양식 제출 (0) | 2022.09.04 |
| jQuery - 함수 (0) | 2022.09.04 |
| jQuery - radio, checkBox (0) | 2022.09.04 |