HTML 입력 등가 값 변경에 대한 간략한 분석 및 청취 이벤트 추가

달성할 효과

많은 경우 입력 상자 값의 변화를 실시간으로 모니터링하여 즉각적인 조치를 취하여 시청자를 안내합니다. 웹사이트의 사용자 경험을 향상시키기 위해. 예를 들어, 입력창에 입력된 바이트 수를 즉시 표시하거나, 구글의 연관 검색 효과인 검색 안내를 위한 입력 값을 즉시 읽어올 수 있습니다.
실시간 이벤트를 캡처할 수 있다면 많은 일을 할 수 있습니다.
알아야 할 사항
먼저 onchange와 onpropertychange의 차이점을 이해해야 합니다.

IE에서는 HTML 요소의 속성이 변경되면 onpropertychange를 통해 즉시 캡처할 수 있습니다.
onchange는 속성 값이 변경될 때 이벤트가 활성화되기 전에 현재 요소가 포커스를 잃게 해야 합니다(onblur).

이를 이해한 후 우리는 onpropertychange의 효과가 우리가 원하는 것임을 알았지만 안타깝게도 IE에서만 작동합니다. onpropertychange를 교체할 다른 시간을 찾을 수 있나요?

정보를 읽은 후 oninput 이벤트를 사용하면 다른 브라우저에서도 동일한 효과를 얻을 수 있다는 것을 알게 되었습니다. IE 그냥 구분해 보세요.

oninput 사용법

먼저 oninput 사용법을 알아보겠습니다.
등록 시간을 페이지에 직접 적으면 다음과 같은 작성 방법을 얻을 수 있습니다.
74f0151b597eb752919b1d5fcb00a152

단, oninput을 JS 코드로 작성하여 분리할 경우 일반적인 이벤트 등록 방법과 다소 다릅니다. 반드시 addEventListener를 사용하여 등록해야 합니다.

attachEvent와 addEventListener의 차이점

그런데 AttachEvent와 addEventListener의 사용 방법을 살펴보겠습니다.

attachEvent 메소드는 다음과 같습니다. 특정 이벤트의 경우 다른 처리 이벤트를 첨부합니다. (Mozilla 시리즈는 지원하지 않습니다.)
addEventListener 메소드는 Mozilla 시리즈에서 사용됩니다

예:

document.getElementByIdx_x_x("btn").onclick = method1;   
  
document.getElementByIdx_x_x("btn").onclick = method2;   
  
document.getElementByIdx_x_x("btn").onclick = method3;

이런 경우 Mozilla 시리즈이고 이 메서드를 지원하지 않는 경우 addEventListener

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.attachEvent("onclick",method1);   
  
btn1Obj.attachEvent("onclick",method2);   
  
btn1Obj.attachEvent("onclick",method3);

를 사용해야 합니다. oninput 이벤트를 등록하기 위해 addEventListener를 사용하는 방법을 학습한 후, 해결해야 할 문제(브라우저 분할)로 돌아가겠습니다.

IE 브라우저 판단

IE를 어떻게 구별하나요?

이것은 인터넷에서 찾는 방법이 여러 가지인 것 같습니다. 두 가지 범주로 분류됩니다.

하나는 브라우저의 기능적 속성을 결정하는 것입니다. 두 번째는 가장 오래되고 가장 널리 사용되는 탐지 방법일 수 있는 전통적인 사용자 에이전트 문자열을 판단하는 것입니다. 여기서 자세한 내용은 다루지 않겠습니다. 비교적 간단한 방법으로 판단합니다.rree

지금까지 발생한 문제는 해결되었습니다. 이제 시작하겠습니다. 우리의 아이디어가 실현될 수 있는지 테스트하기 위해 코드를 작성합니다.

위 글은 html 입력 동일값 변화를 간략하게 분석하고 모니터링 이벤트를 추가한 내용입니다. 모두 에디터가 공유한 내용이니 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트.

html 입력 등가 변경의 간단한 분석 및 모니터링 이벤트 추가에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!