javascript attachmentEvent 바인딩 여러 이벤트 실행 순서 문제_javascript 기술

일반적인 바인딩 이벤트는

와 같은 페이지 요소에 직접 바인딩됩니다. 또 다른 방법은 이를 분리하여 js 코드로 작성하는 것입니다. 예를 들어 document.getElementById('wrap').onclick = function(){a();} 여러 메서드를 바인딩해야 하는 경우 document.getElementById('wrap').onclick =과 같이 직접 함께 작성하면 됩니다. function(){a();b();} 또는

. 그러나 우리는 이와 같이 별도의 바인딩 메소드인 bin(el,name,fn)을 작성하는 경우가 많습니다.

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

함수 바인딩(el,name,fn) { // 바인딩 이벤트
return el.addEventListener?el.addEventListener(name,fn,false):el.attachEvent('on' name,fn)
}

This

코드 복사 와 같은 DOM 객체에 여러 번의 클릭 이벤트를 바인딩하는 방식입니다. 코드는 다음과 같습니다.

bind( document.getElementById('wrap'),'click',a)
bind(document.getElementById('wrap'),'click',b)

ie6,7에서는 8 이하에서는 실행 순서에 문제가 있을 것입니다(ie9 이하에서는 아직 명확하지 않습니다. 환경 테스트가 없습니다. 환경을 아는 친구들이 테스트하는 데 도움을 줄 수 있기를 바랍니다). 다른 브라우저는 ff, chrome, safari 순으로 실행됩니다. 정보를 검색한 결과 IE8에서는 실행 순서가 반대인 반면 IE6과 IE7은 무작위로 실행된다는 사실을 발견했습니다. IE가 어떻게 무작위로 실행되는지 정말 이해가 되지 않습니다. 혹시 숨은 동기가 있는 것은 아닐까? 이 작업의 목적을 아시는 분이 계시다면 제가 직접 테스트한 결과 ie8이 실행 순서를 바꾸는 반면 ie6과 7은 불규칙하게 실행되는 것으로 확인되었습니다. 무작위 실행은 실행될 때마다 순서가 달라야 한다는 점은 이해합니다. 그러나 실제로 작성할 때 순서가 고정되어 있는 한 실행 시의 순서도 고정됩니다. 규칙을 찾을 수 없습니다).

그러나 jQuery의 $.bind(type, data, fn) 메소드에는 이 문제가 없습니다. jQuery의 원본 코드를 살펴보니 이 코드도 사용되었습니다. 🎜>

코드 복사 코드는 다음과 같습니다. if (elem.addEventListener)

　elem.addEventListener(type, handler , false);

else if (elem.attachEvent)
　elem.attachEvent("on" type, handler)


이 메소드로 이벤트가 바인딩되지만 그 전에는 jquery 객체가 이미 존재하는지 판단합니다. 동일한 유형의 핸들러가 있는 경우 반복적으로 바인딩되지 않지만 객체의 핸들이 핸들러에 병합되어 메소드가 됩니다. 이는 함수 c( ){a();b();} 이렇게 메소드를 입력하면 IE에서 여러 메소드를 바인딩할 때 실행 순서가 혼동되지 않습니다.

다음은 네티즌의 답변:

IE6 7은 무작위로 실행되나요? 지난번 테스트 해보니 순서가 거꾸로 된 것 같았고, 랜덤 실행 같은 것도 없었습니다.
특별히 테스트 하러 갔습니다

코드 복사 코드는 다음과 같습니다 a href="# " id="test1">test



IE6에 대한 언급이 없습니다. 어떻게 테스트했는지 모르겠습니다.

작성자 답변:
귀하의 코드를 ie6 및 ie7에서 테스트했는데 실행 순서가 불규칙합니다. 정보 출처는 다음과 같습니다

http://www.w3help.org/zh- cn/causes/SD9011
저도 위의 소위 무작위 실행이 부적절하다고 생각합니다. 제 블로그 게시물에서 말했듯이 실행 순서는 불규칙하지만 실행 순서는 매번 동일합니다. 무작위라면 실행 순서가 매번 달라져야 한다는 점을 설명하고 싶습니다.