oninput, onpropertychange, onchange 사용법
onchange 트리거 이벤트는 두 가지 조건을 충족해야 합니다.
a) 현재 개체의 속성이 변경되고 키보드 또는 마우스 이벤트에 의해 트리거됩니다(스크립트 트리거가 유효하지 않음).
b) 현재 객체가 초점을 잃습니다(흐림).
onpropertychange의 경우 현재 객체의 속성이 변경되는 한 이벤트가 트리거되지만 이는 IE에만 적용됩니다.
oninput은 onpropertychange의 비 IE 브라우저 버전입니다. Firefox 및 Opera와 같은 브라우저를 지원하지만 한 가지 차이점이 있습니다. 객체에 바인딩되면 객체의 모든 속성 변경이 이벤트를 트리거할 수 있는 것은 아닙니다. 개체 값이 변경되었습니다.
버블링 이벤트 중지
if (e) //이벤트 버블링 중지 e.stopPropagation();
그렇지 않으면 window.event.cancelBubble = true;
위의 코드를 실행하고 입력 상자를 클릭하면 onpropertychange도 트리거됩니다. 값을 입력하면 이 이벤트도 트리거됩니다. 이는 속성 값이 수정되는 한 이 이벤트가 트리거된다는 것을 증명합니다.
둘째, 이제 이 기능을 발견했으므로 문제가 발생합니다. 때로는 입력 상자 값이 변경될 때 함수 작업을 수행하고 싶지만 사용자 정의 속성도 수정해야 하므로 onpropertychange가 두 번 트리거됩니다. 우리가 원하는 것이 아닐 수도 있습니다.
추측컨데, 이러한 속성이 제공되므로 어떤 속성이 변경되었는지 알 수 있을 것입니다. 매개변수의 수와 그 내용을 알아보세요.
XML/HTML 코드
다음과 같이 코드 코드를 복사합니다.
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<스크립트 유형="텍스트/자바스크립트">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
경고(인수.길이);
for(var i=0;i<arguments.length;i++){
경고(인수[i]);
}
});
-->
</script>
위 코드를 실행하면 1과 [object] 팝업이 나타나는데, 이는 이벤트가 콜백 함수에 하나의 매개변수만 전달하고 객체 유형임을 나타냅니다.
그럼 이 객체를 순회해 보겠습니다.
XML/HTML 코드
다음과 같이 코드 코드를 복사합니다.
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<스크립트 유형="텍스트/자바스크립트">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(o의 var 항목){
Alert(항목+":"+o[항목]);
}
});
//-->
</script>
이를 실행해 보면 많은 속성이 있다는 것을 알 수 있지만, 주의 깊게 살펴보면 다음과 같은 속성을 찾을 수 있습니다. propertyname 이 속성의 의미는 누구나 짐작할 수 있을 것입니다. 예, 이는 수정된 속성을 가져오는 데 사용됩니다.
XML/HTML 코드
다음과 같이 코드 코드를 복사합니다.
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<스크립트 유형="텍스트/자바스크립트">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
경고(o.propertyName);
});
//-->
</script>
텍스트 상자를 클릭하고 각각 값을 입력하면 각각 myprop과 value가 팝업되는 것을 확인할 수 있습니다.
처음 질문으로 돌아가서 값이 변경되었는지 여부만 확인하면 됩니다.
코드를 직접 살펴보겠습니다.
XML/HTML 코드
다음과 같이 코드 코드를 복사합니다.
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<스크립트 유형="텍스트/자바스크립트">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //값이 변경되지 않는 한 다음 작업을 수행하지 않습니다.
//.....함수 처리
});
//-->
</script>