SeouliteLab
jQuery로 이벤트의 기본 동작 막기 본문
일반적으로 HTML 요소들은 특정 이벤트가 발생했을 때 특정 동작을 수행합니다. 하지만 때때로 이러한 기본 동작을 막고 사용자 정의 동작을 수행해야 할 때가 있습니다. jQuery의 event.preventDefault() 메서드는 이러한 상황에서 기본 동작을 막는 데 사용됩니다.
예제 1: 링크 클릭 시 기본 동작 막기
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 이벤트의 기본 동작 막기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
alert("링크를 클릭했지만 기본 동작을 막았습니다.");
});
});
</script>
</head>
<body>
<a href="https://www.example.com">링크를 클릭해보세요</a>
</body>
</html>결과:
- 링크를 클릭하면 기본 동작인 페이지 이동이 발생하지 않고, 알림창이 뜨게 됩니다.
설명:
이 예제에서는 <a> 태그를 클릭했을 때의 기본 동작인 페이지 이동을 막기 위해 event.preventDefault()를 사용했습니다. 이로써 링크를 클릭했을 때 페이지가 이동하는 대신 사용자에게 알림창이 뜨도록 만들었습니다.
예제 2: 폼 제출 시 기본 동작 막기
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 이벤트의 기본 동작 막기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit(function(event){
event.preventDefault();
alert("폼을 제출했지만 기본 동작을 막았습니다.");
});
});
</script>
</head>
<body>
<form>
<input type="text" name="name" placeholder="이름">
<button type="submit">제출</button>
</form>
</body>
</html>결과:
- 폼을 제출하면 기본 동작인 페이지 새로고침이 발생하지 않고, 알림창이 뜨게 됩니다.
설명:
이 예제에서는 폼을 제출했을 때의 기본 동작인 페이지 새로고침을 막기 위해 event.preventDefault()를 사용했습니다. 이로써 폼을 제출했을 때 페이지가 새로고침되는 대신 사용자에게 알림창이 뜨도록 만들었습니다.
예제 3: 키보드 이벤트의 기본 동작 막기
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 이벤트의 기본 동작 막기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).keydown(function(event){
if (event.key === "a") {
event.preventDefault();
alert("키보드 'a'를 눌렀지만 기본 동작을 막았습니다.");
}
});
});
</script>
</head>
<body>
<p>문서 내 어디서든 키보드 'a'를 눌러보세요.</p>
</body>
</html>결과:
- 키보드 'a'를 누르면 해당 키 입력의 기본 동작이 막히고, 알림창이 뜨게 됩니다.
설명:
이 예제에서는 키보드 이벤트 중 'a' 키를 눌렀을 때의 기본 동작을 막기 위해 event.preventDefault()를 사용했습니다. 이로써 'a' 키를 눌렀을 때 기본 동작인 문자 입력이 발생하는 대신 사용자에게 알림창이 뜨도록 만들었습니다.
예제 4: 마우스 오른쪽 버튼 클릭 시 메뉴 열기 방지
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 이벤
트의 기본 동작 막기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(document).contextmenu(function(event){
event.preventDefault();
alert("마우스 오른쪽 버튼을 클릭했지만 기본 동작을 막았습니다.");
});
});
</script>
</head>
<body>
<p>문서 내 어디서든 마우스 오른쪽 버튼을 클릭해보세요.</p>
</body>
</html>결과:
- 마우스 오른쪽 버튼을 클릭하면 해당 이벤트의 기본 동작인 컨텍스트 메뉴가 열리지 않고, 알림창이 뜨게 됩니다.
설명:
이 예제에서는 마우스 오른쪽 버튼을 클릭했을 때의 기본 동작인 컨텍스트 메뉴가 열리는 것을 막기 위해 event.preventDefault()를 사용했습니다. 이로써 마우스 오른쪽 버튼을 클릭했을 때 컨텍스트 메뉴가 열리는 대신 사용자에게 알림창이 뜨도록 만들었습니다.
예제 5: 드래그 앤 드롭 동작 중 기본 동작 막기
<!DOCTYPE html>
<html>
<head>
<title>jQuery로 이벤트의 기본 동작 막기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#draggable').on('dragstart', function(event){
event.preventDefault();
alert("드래그 앤 드롭 동작 중 기본 동작을 막았습니다.");
});
});
</script>
</head>
<body>
<div id="draggable" draggable="true" style="width: 100px; height: 50px; background-color: lightcoral;">드래그할 영역</div>
</body>
</html>결과:
- 요소를 드래그할 때의 기본 동작인 드래그 앤 드롭이 발생하지 않고, 알림창이 뜨게 됩니다.
설명:
이 예제에서는 요소를 드래그할 때의 기본 동작인 드래그 앤 드롭을 막기 위해 event.preventDefault()를 사용했습니다. 이로써 요소를 드래그할 때 기본 동작이 발생하는 대신 사용자에게 알림창이 뜨도록 만들었습니다.
jQuery의 event.preventDefault() 메서드를 사용하면 이벤트의 기본 동작을 막을 수 있습니다. 이를 통해 웹 애플리케이션에서 사용자 정의 동작을 구현하거나, 원치 않는 동작을 방지할 수 있습니다.
'프로그래밍' 카테고리의 다른 글
| jQuery 이벤트 객체의 result 속성 활용하기 (0) | 2024.04.02 |
|---|---|
| jQuery 이벤트 객체의 relatedTarget 속성 활용하기 (0) | 2024.04.02 |
| jQuery로 마우스 이벤트의 수직 위치 파악하기 (0) | 2024.04.02 |
| jQuery event.pageX 속성을 활용한 마우스 이벤트 처리 (0) | 2024.04.02 |
| jQuery event.namespace 속성을 활용한 이벤트 네임스페이스 관리 (0) | 2024.04.02 |