JavaScript 및 JQuery_javascript 기술을 사용한 마우스 이벤트 버블링 처리

간단한 마우스 이동 이벤트:

들어가세요

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

mouseenter: 버블링 없음
마우스오버: 버블

마우스 포인터가 선택한 요소 또는 해당 하위 요소를 통과할 때마다 마우스 오버 이벤트가 트리거됩니다
mouseenter 이벤트는 마우스 포인터가 선택한 요소를 통과할 때만 트리거됩니다.

퇴거

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

mouseleave: 버블링 없음
mouseout: 버블링

마우스 포인터가 선택한 요소나 하위 요소를 벗어나더라도 mouseout 이벤트가 트리거됩니다
mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 트리거됩니다

사례를 통해 문제를 살펴보겠습니다.

mouseout 이벤트를 중첩된 수준에 바인딩하면 mouseout 이벤트가 상상했던 것과 다르다는 것을 알 수 있습니다

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

외부 하위 요소

하위 요소

0

0

mouseout 이벤트에서 문제를 발견했습니다.

1. 버블링을 방지할 수 없습니다
2. 내부 하위 요소에서도 트리거됩니다

mouseover 이벤트에도 동일한 문제가 있는데, stopPropagation 메소드가 실패하면 버블링을 어떻게 중지합니까?

1. 여기서는 mouseover 및 mouseout이 반복적으로 발생하는 것을 방지하기 위해 이벤트 객체의 관련 속성을 사용합니다. 이 속성은 mouseover 및 mouseout 이벤트의 대상 노드에 대한 관련 노드의 속성을 결정하는 데 사용됩니다. 간단히 말하면, mouseover 이벤트가 트리거되면 관련 타겟 속성은 마우스가 방금 떠난 노드를 나타냅니다. mouseout 이벤트가 트리거되면 마우스가 이동하는 객체를 나타냅니다. MSIE는 이 특성을 지원하지 않으므로 fromElement 및 toElement라는 대체 특성이 있습니다.
2. 이 속성을 사용하면 마우스가 어느 개체에서 이동하고 있는지, 어디로 이동하는지 명확하게 알 수 있습니다. 이런 방식으로 관련 객체가 이벤트를 트리거하려는 객체 내부에 있는지, 아니면 객체 자체인지 확인할 수 있습니다. 이 판단을 통해 우리는 실제로 사건을 촉발할지 여부를 합리적으로 선택할 수 있습니다.
3. 여기서는 객체가 다른 객체에 포함되어 있는지 확인하는 방법인 Contains 메소드도 사용합니다. MSIE와 FireFox는 각각 검사 방법을 제공하며 여기에는 기능이 캡슐화되어 있습니다.

jQuery의 처리 방식은 똑같습니다

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

jQuery.each({
        mouseenter: "mouseover",
        mouseleave: "mouseout",
        포인터입력: "포인터오버",
        포인터리브: "포인터아웃"
    }, 함수(원본, 수정) {
        jQuery.event.special[orig] = {
            대리자 유형: 수정,
            바인딩 유형: 수정,

            핸들: 함수(이벤트) {
                var ret,
                    대상=이것,
                    관련 = event.관련Target,
                    handlerObj = event.handleObj;

                // 마우스 입력/나가기의 경우 관련이 대상 외부인 경우 핸들러를 호출합니다.
                // 주의: 마우스가 브라우저 창에서 나가거나 들어오면 관련 타겟이 없습니다
                if (!관련 || (관련 !== 대상 && !jQuery.contains(대상, 관련))) {
                    event.type = handlerObj.origType;
                    ret = handlerObj.handler.apply(this, 인수);
                    event.type = 수정;
                }
                리트윗;
            }
        };
    });