js 변경, 속성 변경, 입력 events_javascript 기술에 대한 간략한 토론

https://github.com/mootools/mootools-core/issues/2170

이 문제는 IE(LTE8)의 확인란 및 라디오 변경 이벤트 구현에서 발생합니다. LTE8에서 테스트되었습니다. ), 체크박스나 라디오를 클릭하면 포커스를 잃지 않으면 변경 이벤트가 즉시 트리거되지 않습니다. 그러나 다른 표준 브라우저(IE9 포함)에서는 클릭 후 즉시 변경 이벤트가 트리거됩니다. 해결 방법은 비교적 쉽습니다. IE(LTE8)에서 요소별 속성 변경 이벤트를 사용하면(IE9에는 더 이상 이 기능이 없음) 위와 같은 문제를 피할 수 있습니다. :

코드 복사 코드는 다음과 같습니다.

checkEl.attachEvent(' onpropertychange', function() {
console.log('야, 나 변했어')
})

그러나 해결되었다고 생각하기에는 충분하지 않습니다. , checkEl.setAttribute('data-value', 'god')와 같은 작업도 속성 변경 이벤트를 트리거하므로 다음과 같이 판단하려면 event.propertyName을 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

checkEl.attachEvent('onpropertychange', function() {
if(window.event.propertyName == 'checked')
console.log('어쩌고 저쩌고...')
})

괜찮습니다. 이를 통해 다시 선택 항목을 테스트했는데 변경 이벤트의 성능이 여러 브라우저에서 일관되었으며 먼저 초점을 잃을 필요가 없었습니다. input[type="text"]를 다시 테스트했습니다. 변경 이벤트는 포커스를 잃었을 때만 트리거됩니다. 따라서 무언가가 입력되자마자 즉시 트리거되도록 하려면 이전 예를 참조하세요. IE(LTE8)에서는 이를 달성하기 위해 propertychange를 사용할 수 있지만 propertyName의 조건은 'value'가 됩니다. 다른 표준 브라우저(IE9 포함)에서는 다음과 같은 HTML5의 표준 이벤트 입력을 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

inputEl.addEventListener('input', function(event) {
console.log('input event 발생');
}, false) ;

이렇게 하면 우리가 입력할 때마다 이 이벤트가 발생합니다. 어떤 사람들은 이 문제를 설명하는 기사(원본 링크)를 제공합니다. 관심이 있으시면 읽을 수 있습니다.