javascript - jQuery 이벤트 바인딩 켜기 및 끄기 문제

Question

코드는 다음과 같습니다.

으아악

이 코드를 처음 클릭하면 handler1과 handler2가 출력되는 이유는 무엇입니까? handler1의 off는 작동하지만 handler2는 여전히 한 번 실행됩니다.
jQuery 문서를 참조하세요

문서의 설명은 다음과 같습니다. 현재 요소에 이벤트 핸들러를 추가하거나 제거하면 다음 이벤트가 처리될 때까지 적용되지 않습니다.
제 영어가 너무 서툴러서 이 부분의 표현이 그다지 정확하지 않은 것 같습니다. ,이어야 합니다 현재 처리 중에 동일한 이벤트의 추가 또는 삭제가 유효하지 않습니다. 예를 들어 두 번의 클릭을 다음

으로 변경했습니다. 으아악

그러면 handler1만 출력됩니다. mousedown에서 mouseup을 끄면 성공한 것을 알 수 있습니다

다시 처음으로 돌아가서, 현재 처리과정에서 동일한 이벤트의 추가, 삭제가 무효가 되는 이유는 무엇인가요? (jQuery 소스코드를 찾아보려고 했는데 꽤 복잡해서 포기했어요)

Answer 1

아직 소스코드부터 시작해야 합니다

여기를 먼저 보세요: https://github.com/jquery/jqu...

으아악

이것은 이벤트 배포를 위한 핵심 코드의 시작입니다. jquery는 이벤트 콜백 목록을 찾기 위해 이벤트를 배포할 때 을 호출해야 함을 알 수 있습니다. handlerQueue는 내부 이벤트 목록 복사의 일부일 뿐이며, 변경하기 위해 off를 사용하는 것은 복사된 handlerQueue에 당연히 영향을 주지 않는 내부 이벤트 목록입니다.

모든 ​​이벤트 콜백 함수가 냄비에 저장되어 있는 것과 같습니다. 이벤트가 발생하면 jquery는 콜백을 복사하여 그릇에 넣은 다음 그릇에 있는 함수를 순차적으로 실행합니다. 꺼짐으로 변경하는 것은 냄비의 기능만이며 그릇의 기능에는 영향을 미치지 않습니다.

Answer 2

on은 구성 요소의 이벤트 처리 배열에 처리 메서드를 추가하는 것으로 생각하고, off는 배열에서 이 메서드를 제거하는 것으로 생각할 수 있습니다. 이벤트가 트리거되면 jq는 이벤트 처리 배열의 메서드를 동시에 실행합니다. 그러면 이벤트 처리 메서드에서 off가 호출되면 어떻게 될까요? 문서에 매우 명확하게 작성되어 있습니다. 현재 이벤트 트리거 루프에서는 처리 방법이 배열에서 즉시 제거되지 않습니다. 바인딩된 이벤트가 다시 트리거될 때만 반영됩니다.

Answer 3

모두 감사합니다
문제가 발견된 이유는 jq가 내부적으로 이벤트를 캡슐화할 때 동일한 유형의 이벤트가 동일한 배열에 추가되고, 이벤트가 트리거될 때 순회가 이 배열의 복사본이기 때문입니다. Off는 배열을 변경하지 않으므로 처음 클릭했을 때 Hanler2가 출력됩니다. mousedown과 mouseup은 서로 다른 유형의 이벤트이므로 두 개의 배열로 캡슐화되므로 mouseup을 끄는 것이 효과적입니다. 마우스 다운. 표현이 별로 좋지 않을 수도 있으니 JQ 메인 소스코드 몇줄 올려주세요

으아아아