SeouliteLab

jQuery로 이벤트의 기본 동작 막기 본문

프로그래밍

jQuery로 이벤트의 기본 동작 막기

Seoulite Lab 2024. 4. 2. 13:32

일반적으로 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
'프로그래밍' Related Articles more