OnChange 핸들러는 입력 필드가 변경되거나 버튼이 클릭될 때 호출됩니다.

Name 인수에는 소문자로 된 입력 필드 또는 버튼의 이름이 포함됩니다.

예: 프로시저 OnChange(이름: 문자열); 시작하다 // 가격 또는 수량 필드가 변경된 경우 금액을 계산합니다. If Name="price" Or Name="cnt" Then Summa:= RoundMul(가격, Cnt, 2); // 금액 필드가 변경되면 가격을 계산합니다. If Name="summa" Then Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); 끝;

OnPriceChange, OnCntChange, OnSummaChange 핸들러를 사용할 때 유사한 효과를 얻을 수 있습니다.

예: 절차 OnPriceChange; 요약 시작:= RoundMul(가격, Cnt, 2); 끝; ProcedureCntChange에서; 요약 시작:= RoundMul(가격, Cnt, 2); 끝; ProcedureSummaChange에서; 가격 시작:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); 끝;

이 처리기는 거의 모든 이벤트에 대한 정보를 수집하므로 모듈화를 구성할 때 사용하기 편리합니다. 예를 들어:

기본 클래스: 변형; ProcedureCreate에서; BaseDocument.Init(Self) 시작; // 기본 클래스를 만들고 링크를 교환합니다. 문서 초기화.끝; On ProcedureChange(이름: 문자열); BaseClass.OnChange(이름) 시작; // 기본 클래스에 이벤트 전달끝;

또는 싱글톤을 사용하는 모듈성의 예(편집기의 설명 탭에 있는 모듈 속성):

ProcedureCreate에서; BaseClass.OnCreate(Self) 시작; // 문서 초기화.끝; On ProcedureChange(이름: 문자열); BaseClass.OnChange(Self, Name) 시작; // 기본 클래스에 이벤트를 전달합니다.끝;

변경 처리기 설정 주어진 요소또는 이 이벤트를 발생시킵니다. 이 방법에는 세 가지 사용 사례가 있습니다.

handler(eventObject)는 핸들러로 설정할 함수입니다. 호출되면 이벤트 객체를 수신합니다. 이벤트 객체 .

핸들러(eventObject) - 위를 참조하십시오.
eventData - 핸들러에 전달된 추가 데이터. (fName1:value1, fName2:value2, ...) 형식의 객체로 표현되어야 합니다.

unbind() 메서드를 사용하여 설치된 핸들러를 제거할 수 있습니다.

이 메서드를 사용하는 세 가지 옵션은 모두 다른 메서드(위 참조)와 유사하므로 change() 사용에 대한 모든 세부 정보는 이러한 메서드 설명에서 찾을 수 있습니다.

변경 이벤트는 변경 시점에 직접 발생하지 않고 변경된 양식 요소의 포커스가 손실된 경우에만 발생합니다.

예

// ID가 foo인 요소에 대한 변경 이벤트 핸들러를 설정합니다. $("#foo" ) .change (function () ( alert ("요소 foo가 변경되었습니다." ) ; ) ) ; // 요소 foo에서 변경 이벤트를 호출합니다. $("#foo" ) .change () ; // 다른 변경 이벤트 핸들러를 설정합니다. 이번에는 클래스 블록이 있는 // 요소에 대해. 핸들러에 추가 데이터 전달 $(".block" ) .change (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b = " + eventObject.data .b ; alert ("클래스 블록이 있는 요소가 변경되었습니다. " + "이 이벤트 핸들러에 전달된 데이터: " + externalData ) ; ) ;

요소의 값이 변경된 직후에 발생하며 onchange 이벤트는 요소가 포커스를 잃으면 발생합니다. 또 다른 차이점은 onchange 이벤트가 브라우저에서 더 광범위하게 지원되고 와 같은 요소에서 작동하며 .

브라우저 지원 이벤트 속성
오페라
익스플로러
가장자리

변화	예	예	예	예	예	예

구문 사용 예

onchange 이벤트 속성을 사용하여 포커스가 변경되었을 때 요소에 입력된 텍스트를 표시하는 예제입니다. oninput 이벤트 속성을 사용했다면 포커스가 변경될 때가 아니라 텍스트가 즉시 표시되었을 것입니다.

onchange 이벤트

일부 텍스트를 입력하고 요소에서 포커스를 제거합니다.

function testFunction() ( var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "다음 텍스트를 입력했습니다: " + x; )

일부 텍스트를 입력하고 요소에서 포커스를 제거합니다.

onchange 이벤트 속성을 사용하여 value 태그(드롭다운 목록 항목)의 값을 표시하는 예입니다.

onchange 이벤트

목록에서 소원을 선택하십시오.

소원 1 소원 2 소원 3

function wishFunction() ( var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "You have selected: " + z; )

목록에서 소원을 선택하십시오.

소원 1 소원 2 소원 3

다음을 사용하여 요소의 2D 회전을 변경하는 예를 고려하십시오. CSS 속성변환 , HTML 속성 onchange 이벤트 및 JavaScript 함수:

CSS에서 요소의 2D 회전 #test ( width : 100px ; /* 상자의 너비 설정 */ height : 100px ; /* 상자의 높이 설정 */ margin : 20px ; /* 패딩 양 설정 요소의 모든 면 */ border : 1px 단색 주황색 ; /* 주황색의 1px 단색 테두리 설정 */ background : khaki ; /* 배경색 설정 */ transform : rotate(0deg) ; /* 2D 회전 없음 * / -webkit-transform : rotate(0deg ) ; -ms-transform : rotate(0deg) ; /* 초기 브라우저를 지원하기 위해 */ ) function rotate(value) ( ​​/* 스타일 값을 변경하는 함수 생성 id = test인 요소, id = result인 요소의 변경 결과 표시 및 이전 브라우저 버전 지원 */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg) " ; document.getElementById("test" ).style.msTransform = "rotate( " + value + "deg)" ; /* 초기 브라우저 지원 */ document.getElementById("test" ).style.MozTransform = "rotate( " + 값 + "도)" ; /* 초기 브라우저 버전 지원 */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("result" ).innerHTML = 값 + "deg" ; )

슬라이더를 이동하여 요소를 회전합니다.

변환: 회전(0도); Rotate me _element"> 요소 HTML 아이스크림 맛 선택: 하나 선택 … 초콜렛 정어리 바닐라

Body ( display: grid; grid-template-areas: "결과 선택"; ) select ( grid-area: select; ) .result ( grid-area: 결과; )

JavaScript const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => ( const result = document.querySelector(".result"); result.textContent = `You like $(event.target.value)`; )); 결과 텍스트 입력 요소

를 포함한 일부 요소의 경우 컨트롤이 포커스를 잃을 때까지 변경 이벤트가 실행되지 않습니다. 아래 필드에 무언가를 입력한 다음 다른 곳을 클릭하여 이벤트를 트리거하십시오.

HTML JavaScript const 입력 = document.querySelector("입력"); const log = document.getElementById("로그"); input.addEventListener("변경", updateValue); function updateValue(e) ( log.textContent = e.target.value; ) 결과 사양 사양 상태

HTML 리빙 스탠다드 해당 명세서에서 "변경"의 정의.	생활 수준

브라우저 호환성

이 페이지의 호환성 표는 구조화된 데이터에서 생성됩니다. 데이터에 기여하고 싶다면 https://github.com/mdn/browser-compat-data를 확인하고 풀 요청을 보내주십시오.

GitHub에서 호환성 데이터 업데이트

데스크톱 모바일 Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android용 Chrome Android용 Firefox Android용 Opera Android용 Opera iOS Samsung Internet변화

Chrome 전체 지원예	Edge 전체 지원 12	Firefox 전체 지원예	IE 전체 지원 예	Opera 전체 지원 예	Safari 전체 지원 예	WebView Android 전체 지원 예	Chrome Android 전체 지원 예	Firefox Android 전체 지원예	Opera Android 전체 지원 예	Safari iOS 전체 지원 예	삼성 인터넷 안드로이드 전체 지원 예

범례 전체 지원 전체 지원

브라우저마다 특정 유형의 상호 작용에 대해 변경 이벤트를 발생시켜야 하는지 여부에 항상 동의하지는 않습니다. 예를 들어 요소의 키보드 탐색은 사용자가 Enter 키를 누르거나 포커스를 다른 곳으로 전환할 때까지 Gecko에서 변경 이벤트를 발생시키지 않습니다(버그 126379 참조). 그러나 Firefox 63(Quantum) 이후로 이 동작은 모든 주요 브라우저 간에 일관됩니다.

입력 요소가 있고 콘텐츠의 길이를 계속 확인하고 길이가 특정 크기와 같을 때마다 제출 버튼을 활성화하고 싶지만 이벤트가 발생하기 때문에 javascript onchange 이벤트에 문제가 있습니다. 입력 요소는 내용이 변경될 때가 아니라 범위 외부에서 종료됩니다.

Onchange는 이름의 내용이 변경될 때 실행되지 않고 이름이 초점을 벗어날 때만 실행됩니다.

이 이벤트가 콘텐츠 변경에 영향을 미치도록 할 수 있는 일이 있습니까? 또는 내가 이것을 위해 사용할 수 있는 다른 이벤트? onkeyup 기능을 사용하여 해결 방법을 찾았지만 브라우저의 자동 완성에서 일부 콘텐츠를 선택하면 작동하지 않습니다.

현장 콘텐츠가 변경될 때 작동할 수 있는 키보드나 마우스를 원합니다. 아이디어가 있으신가요?

(function () ( var oldVal; $("#name").on("textInput 입력 변경", function () ( var val = this.value; if (val !== oldVal) ( oldVal = val; checkLength( 값); ) )); )());

이것은 change , keystrokes , paste , textInput , input (사용 가능한 경우)을 포착합니다. 그리고 필요 이상으로 촬영하지 마십시오.

사용자 에이전트는 하나 이상의 문자가 있을 때 이 이벤트를 보내야 합니다. 이러한 문자는 키보드 장치의 키를 누르거나 뗀 결과, 입력 방법 편집기 처리 또는 음성 명령. "붙여넣기" 작업이 간단한 문자 시퀀스, 즉 구조나 스타일 정보가 없는 텍스트 패스를 생성하는 경우 이 유형의 이벤트도 생성해야 합니다.

인용구>

사용자가 값을 변경할 때 컨트롤에서 실행됨

인용구>

기회를 잡으려면 onkeyup과 onclick(또는 onmouseup)의 조합을 사용해야 합니다.

동일한 문제에 대해 개발 중인 또 다른 솔루션이 있습니다. 그러나 입력 필드를 많이 사용하므로 이전 값을 요소 자체의 사용자 정의 속성인 "data-value"로 유지합니다. jQuery 사용관리하기가 너무 쉽습니다.

$(document).delegate(".filterBox", "keyup", ( self: this ), function (e) ( var self = e.data.self; if (e.keyCode == 13) ( e.preventDefault( ); $(this).attr("data-value", $(this).val()); self.filterBy(this, true) ) else if (e.keyCode == 27) ( $(this). val(""); $(this).attr("데이터 값", ""); self.filterBy(this, true) ) else ( if ($(this).attr("데이터 값") ! = $(this).val()) ( $(this).attr("데이터-값", $(this).val()); self.filterBy(this); ) ) );

여기서는 5-6개의 입력 필드를 사용했고, filterBox 클래스가 있으며, 데이터 값이 자신의 값과 다른 경우에만 filterBy 메서드를 만듭니다.