입력 요소에 대한 \'input\' 이벤트와 \'change\' 이벤트의 차이점은 무엇입니까?

입력 요소에 대한 입력 및 변경 이벤트

HTML의 입력 요소를 사용하면 사용자가 텍스트를 입력하고 편집할 수 있습니다. 변경 및 입력이라는 두 가지 이벤트 핸들러를 지원합니다. 두 이벤트 모두 요소의 텍스트 콘텐츠가 수정될 때 트리거되지만 동작에는 미묘한 차이가 있습니다.

'입력' 이벤트

입력 이벤트는 다음과 같은 경우에 발생합니다. 다음을 포함하여 요소의 텍스트 콘텐츠가 변경됩니다.

• 문자 입력
• 문자 삭제
• 텍스트 선택
• 텍스트 붙여넣기

일반적으로 입력 데이터를 즉시 검증하고 사용자에게 즉각적인 피드백을 제공하는 데 사용됩니다.

'변경' 이벤트

변경 이벤트는 텍스트 내용이 변경된 후 요소가 포커스를 잃을 때 발생합니다. 즉, 변경 이벤트가 트리거되기 전에 사용자는 텍스트를 수정하고 요소에서 포커스를 이동해야 합니다.

포커스를 잃는 것 외에도 변경 이벤트는 다음과 같은 이유로 트리거될 수도 있습니다.

• Enter 키 누르기
• 드롭다운에서 옵션 선택
• 체크박스의 선택된 상태 변경

jQuery에서의 사용법

다음과 같이 jQuery를 사용하여 입력 요소에 이벤트 리스너를 연결할 수 있습니다.

$('input[type="text"]').on('change', function() {
    alert($(this).val());
});

// Equivalent to using 'input' instead of 'change'
$('input[type="text"]').on('input', function() {
    alert($(this).val());
});

이벤트 순서 지정

입력과 변경이 모두 필요한 경우 이벤트가 동일한 요소에 연결되면 다음 순서로 트리거됩니다.

1. On Input: Triggered every time the text content changes
2. On Change: Triggered when the element loses focus after the text content changes

이 동작을 사용하면 입력 이벤트로 즉각적인 변경 사항을 처리하고 변경 이벤트로 요소가 포커스를 잃을 때 작업을 수행할 수 있습니다. .

예

다음 예는 입력 이벤트와 변경 이벤트의 차이점을 보여줍니다.

$("input, select").on("input", function () {
    console.log("On input: " + this.tagName + " | " + this.value);
}).on("change", function () {
    console.log("On change: " + this.tagName + " | " + this.value);
});

텍스트 입력을 입력하거나 드롭다운 옵션을 선택하면 다음 출력이 표시됩니다.

On input: INPUT | ...
On change: INPUT | ...

각 키 입력이나 문자 변경으로 입력이 트리거되는 반면, 변경은 포커스가 손실된 후에만 트리거됩니다.

위 내용은 입력 요소에 대한 \'input\' 이벤트와 \'change\' 이벤트의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!