지난 이틀 동안 OnmouseOver 이벤트 및 OnmouseOut 이벤트에 노출되었습니다. 마우스 포인터가 요소로 이동하고 마우스 포인터가 지정된 물체에서 벗어 났을 때 이벤트를 트리거했을 때 항상 단순히 이벤트를 트리거한다고 생각했습니다. 그러나 나는 이것들이 단순한 설명이라는 것을 갑자기 발견했습니다. 결국, 그들은 여전히 이상한 기능을 가지고 있습니다. 좋은가요?
먼저 상자 구현 :
이 상자에서 OnMouseOver 이벤트 및 OnMouseOut 이벤트 묶음
그들에게 아무 일도 일어나지 않을 것이라는 것을 발견하고 (헤헤, 당신은 알고 있습니다!)
B 요소를 만들어 요소 A에 중첩되어 A의 자식 요소로
우리는 여전히 OnMouseOver 이벤트와 OnMouseOut 이벤트를 OUTER Parent Element A에만 묶습니다. 무엇을 알게 될까요? 네, 맞습니다! 마우스가 A의 하위 요소 B에 들어가서 제거되면 OnMouseOver 이벤트 및 OnMouseOut 이벤트도 발생합니다! ! 왜? 이것은 내가 원하는 것이 아닙니다! 현재 B가 A의 일부가 아닌가? 물론, 그렇지 않으면 요소 B가 이동할 때 OnMouseOver 이벤트가 발생하지 않습니다. 이것은 요소 B가 여전히 A의 필수 부분임을 증명합니다.
그럼 무슨 일이야? 결국, 사건이 실수를하고 있습니까? 일반적으로 사용되는 브라우저에는 이벤트 버블 및 이벤트 캡처에 두 가지 종류의 이벤트 스트림이 있다는 것을 모두 알고 있습니다. 이벤트 버블의 정의를 살펴 보겠습니다. 이벤트는 가장 구체적인 이벤트 목표에서 가장 구체적인 이벤트 대상 (문서 개체)으로 단계별로 전파됩니다. 따라서 마우스가 A의 자식 요소 B에 들어가서 제거되면 B의 OnMouseOver 이벤트 및 OnMouseOut 이벤트가 트리거되지만이 두 이벤트가 없으므로이 두 이벤트가 부모 요소 A에 전달됩니다. A는이 두 이벤트가 있습니다. 따라서 우리가 생각하는 상황이 발생합니다.
어떤 사람들은 그것을 피하는 방법을 말할 것입니다. 결국, 모든 사람이 이런 종류의 요구를 가지고있는 것은 아닙니다. 우리는 방아쇠를 촉발시키기 위해 부모 요소 이벤트가 필요하며, 어린이 요소가 조용히 잘 생긴 사람이되도록하십시오.
따라서 W3C는 마우스 오버 및 마우스 아웃 이벤트에 관련 타겟 속성을 추가합니다.
• 마우스 오버 이벤트에서 마우스가 어떤 요소에서 나오는지를 나타냅니다.
• 마우스 아웃 이벤트에서 마우스가
그러나 Microsoft는 마우스 오버 및 마우스 아웃 이벤트에 두 가지 속성을 추가했습니다.
• 마우스 오버 이벤트에서 Fromelement는 마우스가 어떤 요소에서 나오는지를 나타냅니다.
• 토스 아웃 이벤트에서 마우스를 가리키는 요소
따라서 다음과 같은 코드 구현이 있습니다
document.getElementById ( 'box1'). OnMouseOver = function (e) {if (! e) e = window.event; var reltg = e.RelatedTarget? e.RelatedTarget : e.fromElement; while (reltg && reltg! = this) reltg = reltg.parentNode; if (reltg! = this) {// 여기에서 onMouseEnter endent Alert ( '111');}} document.getElementById ( 'box1'). window.event; var reltg = e. RelatedTarget? E.RelatedTarget : e.tolement; while (reltg && reltg! = this) reltg = reltg.parentNode; if (reltg! = this) {// 여기에 onMouseleave 이벤트 처리 코드 알림 ( '2222');}}을 쓸 수 있습니다.위의 내용은 편집자가 소개 한 OnMouseOver 사건 및 OnMouseOut 사건에 대한 포괄적 인 이해입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!