click() / dblclick() 이벤트 메서드
click() : 선택한 요소를 클릭했을 때 발생
dblclick() : 선택한 요소를 연속해서 두번 클릭했을 때 발생
기본형
1) click 이벤트 등록
$("이벤트 대상 선택").click(function() { 자바 스크립트 코드;});
$(document).on("click", function() { 자바 스크립트 코드;});
2) click 이벤트 강제 발생
$("이벤트 대상 선택").click(); - 콜백함수가 사라짐
1) dblclick 이벤트 등록
$("이벤트 대상 선택").dblclick(function() { 자바 스크립트코드;});
$(document).on("dblclick", function() { 자바 스크립트 코드;});
2) dblclick 이벤트 강제 발생
$("이벤트 대상 선택").dblclick();
<a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기
기본형
1) return false를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function() {
자바 스크립트 코드;
return false;
});
2) preventDefault() 메서드를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function(e) {
e.preventDefault(); // 기본 이벤트를 막다
자바 스크립트 코드;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function() {
$('.btn1').on('click', function(e) { // e 메서드를 사용하여 기본이벤트인 click이벤트가 차단
e.preventDefault();
$('.txt1').css({ backgroundColor: 'yellow'});
});
$('.btn2').on('click', function() {
$('.txt2').css({ backgroundColor: 'cyan'});
});
$('.btn3').on('dblclick', function() {
$('.txt3').css({ backgroundColor: 'lime'});
});
});
</script>
</head>
<body>
<p><a href="https://www.naver.com/" class="btn1">버튼1</a></p>
<p class="txt1">내용1</p>
<p><a href="https://www.naver.com/" class="btn2">버튼2</a></p>
<p class="txt2">내용2</p>
<p><button class="btn3">버튼3</button></p>
<p class="txt3">내용3</p>
</body>
</html>