SeouliteLab

jQuery 이벤트 객체의 result 속성 활용하기 본문

프로그래밍

jQuery 이벤트 객체의 result 속성 활용하기

Seoulite Lab 2024. 4. 2. 13:36

이벤트 핸들러 함수 내에서 작업을 수행하고 그 결과를 다음 핸들러 함수에 전달해야 할 때가 있습니다. jQuery의 이벤트 객체의 result 속성은 이러한 작업을 수행할 때 유용하게 활용될 수 있습니다. 이 속성은 이벤트의 결과를 저장하고 다음 핸들러 함수에 전달하는 데 사용됩니다.

예제 1: 이벤트 결과 저장 및 전달하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 이벤트 객체의 result 속성 활용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#btn1').click(function(event){
        event.result = '첫 번째 버튼 클릭';
      });
      $('#btn2').click(function(event){
        $('#result').text(event.result);
      });
    });
  </script>
</head>
<body>

<button id="btn1">버튼 1</button>
<button id="btn2">버튼 2</button>

<p id="result"></p>

</body>
</html>

결과:

  • 버튼 1을 클릭하면 버튼 2를 클릭했을 때 '첫 번째 버튼 클릭'이 출력됩니다.
  • 버튼 2를 클릭하면 아무것도 출력되지 않습니다.

설명:
이 예제에서는 두 개의 버튼이 있고, 첫 번째 버튼을 클릭하면 두 번째 버튼을 클릭했을 때 특정 결과를 출력하도록 구성되어 있습니다. 버튼 1을 클릭하면 클릭 이벤트 핸들러에서 event.result에 '첫 번째 버튼 클릭'을 저장합니다. 그리고 버튼 2의 클릭 이벤트 핸들러에서는 event.result를 읽어와 결과를 출력합니다.

예제 2: 이벤트 결과에 따라 다른 동작 수행하기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 이벤트 객체의 result 속성 활용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('input').focus(function(event){
        if (event.result === 'allowed') {
          $(this).css('background-color', 'lightgreen');
        } else {
          $(this).css('background-color', 'lightcoral');
        }
      });
    });
  </script>
</head>
<body>

<input type="text" placeholder="여기를 클릭해보세요">

</body>
</html>

결과:

  • 입력 필드를 클릭하면 배경색이 초록색으로 바뀝니다.
  • 입력 필드를 클릭했을 때 다른 동작을 막은 경우 배경색이 붉은색으로 바뀝니다.

설명:
이 예제에서는 입력 필드를 클릭했을 때 이벤트 결과에 따라 다른 동작을 수행하는 방법을 보여줍니다. 입력 필드에 포커스가 되었을 때, 포커스 이벤트 핸들러에서 event.result 값을 확인하여 'allowed'인 경우 배경색을 초록색으로 변경하고, 그렇지 않은 경우 배경색을 붉은색으로 변경합니다.

예제 3: 이벤트 결과를 활용한 비동기 작업 처리

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 이벤트 객체의 result 속성 활용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#btn').click(function(event){
        event.preventDefault();
        setTimeout(function(){
          event.result = '비동기 작업 완료';
          $('#result').text(event.result);
        }, 2000);
      });
    });
  </script>
</head>
<body>

<a href="#" id="btn">클릭</a>

<p id="result"></p>

</body>
</html>

결과:

  • 링크를 클릭하면 2초 후에 '비동기 작업 완료'가 출력됩니다.

설명:
이 예제에서는 링크를 클릭했을 때 비동기 작업을 수행하고, 작업이 완료되면 이벤트 결과를 설정하여 결과를 출력합니다. 클릭 이벤트 핸들러에서는 event.preventDefault()를 사용하여 기본 동작을 막은 후 setTimeout 함수를 사용하여 2초 후에 event.result를 설정하고 결과를 출력합니다.

예제 4: 이벤트 결과를 활용한 유효성 검사

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 이벤트 객체의 result 속성 활용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('form').submit(function(event){
        if ($('#username').val() === '' || $('#password').val() === '') {
          event.preventDefault();
          event.result = 'invalid';
          $('#error').text('유효하지 않은 입력입니다.');
        } else {
          event.result = 'valid';
        }
      });
    });
  </script>
</head>
<body>

<form>
  <label for="username">사용자 이름:</label>
  <input type="text" id="username"><br><br>
  <label for="password">비밀번호:</label>
  <input type="password" id="password"><br><br>
  <input type="submit" value="로그인">
</form>

<p id="error"></p>

</body>
</html>

결과:

  • 사용자 이름 또는 비밀번호를 입력하지 않고 로그인을 시도하면 '

유효하지 않은 입력입니다.'가 출력됩니다.

설명:
이 예제에서는 폼을 제출할 때 사용자 이름과 비밀번호가 입력되었는지 유효성을 검사합니다. 폼 제출 이벤트 핸들러에서 사용자 이름과 비밀번호가 빈 문자열인지 확인하고, 빈 문자열인 경우 이벤트를 취소하고 event.result를 'invalid'로 설정하여 유효하지 않은 입력임을 표시합니다. 그렇지 않은 경우 event.result를 'valid'로 설정합니다.

예제 5: 이벤트 결과를 활용한 동적 클래스 추가

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 이벤트 객체의 result 속성 활용하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('button').click(function(event){
        event.result = 'clicked';
        $('#result').text(event.result);
        $(this).addClass('clicked');
      });
    });
  </script>
  <style>
    .clicked {
      background-color: lightgreen;
    }
  </style>
</head>
<body>

<button>버튼 1</button>
<button>버튼 2</button>
<button>버튼 3</button>

<p id="result"></p>

</body>
</html>

결과:

  • 버튼을 클릭하면 버튼의 배경색이 초록색으로 변경됩니다.

설명:
이 예제에서는 버튼을 클릭했을 때 이벤트 결과를 설정하여 동적으로 클래스를 추가하는 방법을 보여줍니다. 클릭 이벤트 핸들러에서는 event.result를 'clicked'로 설정하고 결과를 출력한 후, 클릭된 버튼에 'clicked' 클래스를 추가하여 배경색이 초록색으로 변경됩니다.

jQuery의 event.result 속성은 이벤트 핸들러에서 작업 결과를 저장하고 전달하는 데 사용됩니다. 이를 통해 이전 핸들러 함수에서 수행된 작업 결과를 다음 핸들러 함수에서 활용할 수 있으며, 이를 통해 원하는 동작을 유연하게 처리할 수 있습니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery event.stopPropagation() 메서드 이해하기: 이벤트 전파 중단하기  (0) 2024.04.03
jQuery event.stopImmediatePropagation() 메서드 이해하기: 이벤트 전파를 즉시 멈추는 방법  (0) 2024.04.03
jQuery 이벤트 객체의 relatedTarget 속성 활용하기  (0) 2024.04.02
jQuery로 이벤트의 기본 동작 막기  (0) 2024.04.02
jQuery로 마우스 이벤트의 수직 위치 파악하기  (0) 2024.04.02
'프로그래밍' Related Articles more