텍스트 상자 내용 변경 event_javascript 기술을 판단하는 JS의 간단한 예
- WBOY원래의
- 2016-05-16 16:56:291347검색
oninput, onpropertychange, onchange 사용법
onchange 트리거 이벤트는 두 가지 조건을 충족해야 합니다.
a) 현재 개체의 속성이 변경되고 키보드 또는 마우스 이벤트에 의해 트리거됩니다(스크립트 트리거가 유효하지 않음)
b) 현재 개체가 초점을 잃습니다(흐림).
Onpropertychange는 현재 개체의 속성이 변경되는 한 이벤트가 트리거되지만 IE에만 적용됩니다.
oninput은 onpropertychange의 비 IE 브라우저 버전입니다. Firefox 및 Opera와 같은 브라우저를 지원하지만 객체에 바인딩될 때 객체의 모든 속성 변경이 이벤트를 트리거할 수 있는 것은 아닙니다. 객체 값을 변경합니다. 변경이 발생할 때 작동합니다.
버블링 이벤트 중지
if (e) //이벤트 버블링 중지 e.stopPropagation()else window.event.cancelBubble = true;
둘째, 이제 이 기능을 발견했으므로 문제가 발생합니다. 때로는 입력 상자 값이 변경될 때 함수 작업을 수행하려는 경우 사용자 정의 속성도 수정해야 하므로 onpropertychange가 두 번 트리거됩니다. , 이는 우리가 원하는 것이 아닐 수도 있습니다.
그런 속성이 제공되기 때문에 어떤 속성이 변경되었는지 알 수 있을 것 같아요. 매개변수의 수와 그 내용을 알아보세요.
XML/HTML 코드
코드 복사 코드는 다음과 같습니다.
>
위 코드를 실행하면 1과 [object] 팝업이 나타나는 것을 볼 수 있습니다. 이는 이벤트가 콜백 함수에 하나의 매개변수만 전달하고 객체 유형이라는 것을 의미합니다.
그럼 이 객체를 순회해 보겠습니다.
XML/HTML 코드
코드 복사
코드는 다음과 같습니다.
실행하여 다음이 있는지 확인합니다. 많은 속성이 있지만 자세히 살펴보면 propertyname과 같은 속성을 찾을 수 있습니다. 이 속성의 의미는 누구나 짐작할 수 있을 것입니다. 예, 이는 수정된 속성을 가져오는 데 사용됩니다.
XML/HTML 코드
실행하여 다음이 있는지 확인합니다. 많은 속성이 있지만 자세히 살펴보면 propertyname과 같은 속성을 찾을 수 있습니다. 이 속성의 의미는 누구나 짐작할 수 있을 것입니다. 예, 이는 수정된 속성을 가져오는 데 사용됩니다.
XML/HTML 코드
코드 복사
코드는 다음과 같습니다.
텍스트 상자를 클릭하고 각각 값을 입력하면 각각 myprop과 value가 나타나는 것을 확인할 수 있습니다.
우리가 시작한 문제로 돌아가서 값이 변경되었는지 확인하면 됩니다.
코드를 직접 살펴보겠습니다:
XML/HTML 코드
텍스트 상자를 클릭하고 각각 값을 입력하면 각각 myprop과 value가 나타나는 것을 확인할 수 있습니다.
우리가 시작한 문제로 돌아가서 값이 변경되었는지 확인하면 됩니다.
코드를 직접 살펴보겠습니다:
XML/HTML 코드
코드 복사
코드는 다음과 같습니다.
;
;
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.