자바스크립트 이벤트 학습 9장 마우스 이벤트_javascript 기술

먼저 mousedown, mouseup_and_click, dblclick, mousemove 및 mouseover mouseout 등 어떤 마우스 이벤트가 있는지 살펴보겠습니다. 그런 다음 관련Target, fromElement 및 toElement 이벤트 속성에 대해서도 설명하겠습니다. 마지막으로 Microsoft의 mouseenter 및 mouseleave 이벤트가 있습니다.

브라우저 호환성 문제는 브라우저 호환성 목록에서 확인할 수 있습니다.

예
다음은 예입니다. 다음 내용을 이해하시면 도움이 될 수 있습니다.
mousedown, mouseup, click 및 dblclick이 이 링크에 등록되어 있습니다. 아래 텍스트 상자에서 볼 수 있습니다. 또는 대화 상자에서. (원문으로 시도해 보세요: http://www.quirksmode.org/js/events_mouse.htm)
Mousedown,mouseup,click
사용자가 요소를 클릭하면 최소 3개의 이벤트가 발생하며 순서는 다음과 같습니다.
1. mousedown, 사용자가 해당 요소에서 마우스 버튼을 눌렀을 때
2. , 사용자가 이 요소에서 마우스 버튼을 놓으면
3. click은 이 요소에서 mousedown과 mouseup이 모두 감지될 때 발생합니다.
일반적으로 mousedown과 mouseup이 클릭보다 더 유용합니다. 일부 브라우저에서는 onclick 이벤트 정보를 읽는 것을 허용하지 않습니다. 그리고 때로는 사용자가 마우스로 특정 작업을 수행할 때 클릭 이벤트가 유지되지 않는 경우도 있습니다.
사용자가 링크에서 마우스 버튼을 누른 다음 마우스 버튼을 멀리 이동하고 멀리 이동한 후 마우스 버튼을 놓는다고 가정해 보겠습니다. 그렇다면 이 링크에는 mousedown 이벤트만 있습니다. 마찬가지로, 사용자가 마우스를 클릭한 후 링크로 이동하면 링크는 마우스업만 됩니다. 두 경우 모두 클릭 이벤트가 발생하지 않습니다.
문제인지 여부는 사용자 행동에 따라 다릅니다. 그러나 클릭이 발생하기를 절대적으로 원하지 않는 한 onmousedown/up 이벤트를 등록해야 합니다.
팝업 경고 상자를 사용하면 브라우저에서 이벤트 추적과 발생 횟수를 잃어 혼란을 초래할 수 있습니다. 그러니 사용하지 않는 것이 좋습니다.
Dblclick
dblclick 이벤트는 거의 사용되지 않습니다. 이를 사용하려면 HTML 요소에 onclick 및 dblclick 이벤트 핸들러를 등록하지 않도록 주의하세요. 둘 다 등록되어 있으면 기본적으로 사용자가 무엇을 하고 있는지 아는 것이 불가능합니다.
간단히 말하면, 사용자가 요소를 더블클릭하면 항상 dblclick 이전에 클릭 이벤트가 발생합니다. 또한 Netscape에서는 두 번째 클릭이 항상 dblclick 이전에 별도로 처리됩니다. 그럼에도 불구하고 경고 상자는 매우 위험합니다.
따라서 click과 dblclick을 잘 분리하면 많은 합병증을 피할 수 있습니다.
Mousemove
mousemove 이벤트는 잘 작동하지만 모든 mousemove 이벤트를 처리하려면 많은 시스템 리소스가 필요할 수 있다는 점에 유의하세요. 사용자가 마우스를 한 픽셀 이동하면 mousemove가 한 번 트리거됩니다. 아무 일도 일어나지 않더라도 오랜 시간이 걸리는 길고 복잡한 기능은 웹사이트의 효율성에 영향을 미칠 것입니다. 특히 오래된 컴퓨터에서는 모든 것이 느려질 것입니다.
따라서 가장 좋은 방법은 필요할 때 onmousemove 이벤트를 등록하고 사용하지 않을 때는 최대한 빨리 제거하는 것입니다.

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

element.onmousemove = doSomething;
// later
element.onmousemove = null

Mouseover 및 mouseout
이 예를 다시 보고, mouseover로 변경하여 시도해 보세요. 이 예에서는 ev3의 onmouseover에 대한 이벤트 핸들러를 추가합니다. 그러나 이벤트가 ev3뿐만 아니라 ev4 또는 범위에서도 트리거된다는 것을 알 수 있습니다. Mozilla 1.3 이전에는 마우스가 텍스트 영역에 들어갈 때마다 트리거되었습니다.
이유는 당연히 이벤트 버블링 때문입니다. 사용자가 ev4에서 마우스 오버 이벤트를 트리거했습니다. 이 요소에는 onmouseover 이벤트 핸들러가 없지만 ev3에는 있습니다. 따라서 이벤트가 ev3까지 버블링되면 프로그램이 실행됩니다.
이러한 설정은 완전히 정확하지만 여전히 문제가 있습니다. 첫 번째 문제는 목표입니다. 마우스가 ev4에 진입했다고 가정합니다:
---------------------------- -------
| div id="ev3"입니다
| ------ |
| div id="ev4" | | |

| -------
------------- -
<--- -----: 마우스 이동
이제 이 이벤트의 target/srcElement는 ev4입니다. 마우스가 이동했기 때문에 이벤트가 발생한 요소입니다. 그러나 다음과 같은 상황이 발생하는 경우:
-----------------------------
| div id="ev3"입니다.
|
| | -- --> | -------- | --- ----
--------------- --
--------->: 마우스 이동
이 이벤트의 대상/srcElement는 동일합니다. 여기서 마우스는 여전히 ev4로 들어갑니다. 그러나 마우스가 ev3 또는 SPAN에서 제공되는 경우 다른 작업을 수행할 수 있습니다. 그러므로 우리는 쥐가 어디서 왔는지 알아야 합니다.
관련Target, fromElement, toElement
W3C는 mouseover 및 mouseout 이벤트에 관련Target 속성을 추가했습니다. mouseover 이벤트에는 마우스가 어디에서 왔는지 포함되고, mouseout 이벤트에는 마우스가 가는 곳이 포함됩니다.
Microsoft에는 다음 정보를 포함하는 두 가지 속성도 있습니다.
1. fromElement는 마우스가 오기 전의 요소를 나타냅니다. 마우스오버의 경우 더욱 유용합니다
2. toElement는 마우스가 이동할 요소를 나타냅니다. 마우스아웃 상황에서 더 유용합니다.
첫 번째 예에서 관련Target/fromElement에는 ev3에 대한 참조가 포함되어 있으며 두 번째 예에서는 SPAN입니다. 이제 쥐가 어디서 왔는지 알 수 있습니다.
크로스 브라우저 코드
마우스 오버 시 마우스가 어디에서 나오는지 알고 싶다면




코드 복사


코드는 다음과 같습니다.

function doSomething(e) { if (!e) var e = window.event var relTarg = e.관련Target | | e .fromElement }

mouseout 시 마우스가 어디로 가는지 알고 싶다면 다음을 따르세요.

복사 code

코드는 다음과 같습니다.

function doSomething(e) { if (!e) var e = window.event var; relTarg = e.관련Target || e .toElement; }

마우스가 레이어를 떠남

레이어 기반 탐색 메뉴에서는 마우스가 레이어를 떠나는 시점을 알아야 할 수 있습니다. 해당 레이어를 닫을 수 있습니다. 따라서 이 레이어의 onmouseout에 대한 이벤트 핸들러를 등록합니다. 그런 다음 이벤트 버블링으로 인해 마우스가 레이어를 떠날 때 onmouseout이 트리거됩니다.
------------
| 레이어 |.onmouseout
| -------- | --> 이 마우스아웃에 대해 알고 싶습니다

| -------- | >| ----> | 하지만 이번 건은 아님

------------
- -->: 마우스 움직임
중지하는 또 다른 방법은 마우스를 이 레이어로 이동한 다음 링크에 도달하면 브라우저가 이 레이어에 mouseout 이벤트를 등록하는 것입니다. 이것은 나를 당혹스럽게 만들었지만(마우스는 여전히 레이어에 있음) 모든 브라우저에는 문제가 없습니다.
그렇다면 마우스가 실제로 레이어를 떠날 때 마우스아웃이 발생하도록 하려면 어떻게 해야 할까요?




코드 복사


코드는 다음과 같습니다.

function doSomething(e) {
if (! e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target
if (tg.nodeName != 'DIV')
var reltg; = (e .관련Target) ? e.관련Target : e.toElement;

while (reltg != tg && reltg.nodeName != 'BODY') reltg= reltg.parentNode if (reltg== tg) return // 마우스가 실제로 레이어를 떠났을 때 마우스아웃이 발생했습니다. // 이벤트 처리 }

먼저 마우스가 남긴 요소인 이벤트 대상을 가져옵니다. 대상이 DIV(레이어)가 아닌 경우에는 마우스가 실제로 레이어를 떠나지 않기 때문에 종료 기능을 이해하시기 바랍니다.
대상이 레이어인 경우 마우스가 레이어를 떠났는지, 레이어에 링크를 입력했는지 확인할 수 없습니다. 따라서 마우스가 이동한 요소인 이벤트의 관련Target/toElement를 다시 확인해야 합니다.
이 요소를 읽은 다음 DOM 트리를 통해 이벤트 대상(DIV) 또는 BODY 요소까지 위쪽으로 이동합니다.
우리가 만나는 대상이 레이어의 하위 요소인 경우 마우스가 레이어를 떠나지 않은 것입니다. 기능 실행을 중지하면 됩니다.
함수가 모든 확인을 통과하면 마우스가 실제로 레이어를 떠났다는 것을 확신할 수 있으며 적절한 작업(일반적으로 레이어 숨기기)을 시작할 수 있습니다.

Mouseenter 및 mouseleave
Microsoft에는 솔루션이 있습니다. 그는 두 개의 새로운 이벤트 mouseenter와 mouseleave를 추가했습니다. 이벤트 버블링에 반응하지 않는다는 점을 제외하면 기본적으로 mouseover 및 mouseout과 동일합니다. 이벤트에 등록된 요소를 전체 블록으로 처리하고
블록 내에서 발생하는 마우스 오버 및 마우스 아웃에 반응하지 않습니다.
따라서 이 두 이벤트도 문제를 해결합니다. 즉, 경계 요소에 마우스 오버/아웃에만 응답합니다.
이제 이 두 이벤트는 IE 버전 5.5 이상에서만 지원됩니다. 어쩌면 다른 브라우저도 언젠가 이것으로부터 배울 것입니다.
종료
이제 이벤트 소개가 끝났습니다. 행운을 빌어요!
원래 주소: http://www.quirksmode.org/js/events_mouse.html
내 트위터: @rehawk