Javascript 마우스 및 휠 events_javascript 기술에 대한 간략한 토론

a) 마우스 이벤트 　

마우스 이벤트는 웹 페이지에서 가장 일반적으로 사용되는 이벤트일 수 있습니다. 마우스는 가장 일반적으로 사용되는 탐색 장치이기 때문입니다. DOM3 레벨 이벤트에는 9개의 마우스 이벤트가 정의되어 있습니다.

클릭: 사용자가 기본 마우스 버튼(일반적으로 마우스 왼쪽 버튼)을 클릭하거나 Enter 키를 누를 때 트리거됩니다.

dbclick: 사용자가 기본 마우스 버튼을 두 번 클릭할 때 발생합니다. 이 이벤트는 DOM2 수준 이벤트에 정의되지 않았지만 일반적으로 지원되며 나중에 DOM3 수준에서 표준화되었습니다.

Mousedown: 사용자가 마우스 버튼을 누르면 트리거됩니다. 이 이벤트는 키보드를 통해 트리거될 수 없습니다.

Mouseenter: 마우스 아이콘이 요소 외부에서 요소 경계 내부로 이동할 때 트리거됩니다. 이 이벤트는 버블링을 지원하지 않으며 요소의 상단 표면에서 마우스가 움직일 때 트리거됩니다. 해당 이벤트는 DOM2 레벨 이벤트에 속하지 않으며, DOM 레벨 3 이후에 추가된 이벤트입니다. IE, FF9, Opera에서는 이 이벤트를 지원합니다.

mouseleave: 이 이벤트는 마우스가 요소 위에 있다가 요소 경계 밖으로 이동할 때 발생합니다. 이는 mouseenter 이벤트와 동일합니다. 요소 위에서는 발생하지 않습니다. . 이 이벤트는 DOM2 수준 이벤트에 속하지 않고 DOM3에 속합니다. 나중에 추가된 이벤트이며 IE, FF9 및 Opera에서 이 이벤트를 지원합니다.

Mousemove: 마우스가 요소 주위를 움직일 때 반복적으로 트리거됩니다. 이 이벤트는 키보드 이벤트를 통해 트리거될 수 없습니다.

마우스아웃: 마우스가 요소 위에 있다가 다른 요소 위로 이동할 때 트리거됩니다. 요소가 원래 요소의 경계 외부로 이동하거나 원래 요소의 하위 요소로 이동합니다. 이 이벤트는 키보드로 트리거될 수 없습니다.

마우스오버: 사용자가 처음으로 요소 경계 외부에서 요소 경계 내로 마우스를 이동할 때 트리거됩니다. 이 이벤트는 키보드를 통해 트리거될 수 없습니다.

Mouseup: 사용자가 마우스 버튼을 놓을 때 트리거됩니다. 이 이벤트는 키보드를 통해 트리거될 수 없습니다.

페이지의 모든 요소는 마우스 이벤트를 지원합니다. mouseenter 및 mouseleave를 제외한 모든 이벤트는 버블링되며 기본 동작은 취소될 수 있습니다. 그러나 일부 마우스 이벤트는 서로 종속되어 있기 때문에 마우스 이벤트의 기본 동작을 취소하면 다른 이벤트에 영향을 미칠 수 있습니다.

동일한 요소에서 mousedown 이벤트와 mouseup 이벤트가 트리거될 때만 마우스 클릭 이벤트가 트리거될 수 있습니다. 두 이벤트 중 하나가 취소되면 클릭 이벤트가 트리거되지 않습니다. 비슷한 원리는 dbclick 이벤트가 클릭 이벤트에 따라 달라지는 것입니다. 두 개의 연속 클릭 이벤트 중 하나가 취소되면 dbclick이 트리거되지 않습니다. 일반적으로 사용되는 마우스 이벤트는

1.mousedown, 2.mouseup, 3.click, 4.mousedown, 5.mouseup, 6.click, 7.dbclick입니다.

click 이벤트인지 dbclick 이벤트인지는 둘 다 다른 이벤트의 트리거링에 따라 달라집니다.

다음 코드를 사용하여 브라우저가 dom2 이벤트에서 마우스 이벤트를 지원하는지 확인할 수 있습니다.

var isSupport = document.implementation.hasFeature('MouseEvents', '2.0'); >
그러나 dom3 수준 이벤트 감지가 다소 다르다는 점은 주목할 가치가 있습니다.

var isSupport = document.implementation.hasFeature('MouseEvent','3.0')

마우스 이벤트에는 하위 클래스 이벤트인 휠 이벤트(휠 이벤트)도 포함되어 있습니다. 휠 이벤트에는 마우스 휠 이벤트나 Mac의 터치패드와 같은 다른 장치의 상호 작용을 반영하는 mousewheel 이벤트 하나만 포함됩니다.


b) 관련 요소
mouseover 및 mouseout 이벤트의 경우 이벤트 관련 요소도 있습니다. 이러한 이벤트에 의해 수행되는 작업에는 다음이 포함됩니다. 마우스가 내부에서 이동합니다. 한 요소의 경계를 다른 요소의 경계 내부로. mouseover 이벤트를 예로 들면, 주요 타겟 요소는 마우스가 이동할 요소이고, 연관된 요소는 마우스를 놓친 요소입니다. 마찬가지로 mouseout 이벤트의 경우 주요 대상은 마우스가 나가는 요소이고 관련 요소는 마우스를 가져오는 요소입니다. DOM은 IE8 이하 이벤트 개체의 관련 요소에 대한 정보를 제공합니다. IE 버전은 관련Targe 속성을 지원하지 않지만 유사한 기능을 가진 fromElement 속성 및 toElement 속성을 제공합니다. IE에서는 mousemove 이벤트가 트리거되면 이벤트 객체의 fromElement에 관련 요소가 포함됩니다. mouseout 이벤트가 트리거되면 이벤트의 toElement 속성에 관련 요소가 포함됩니다. 모든 속성은 IE9에서 지원됩니다. 크로스 브라우저 getRelatedTarget 메소드는 다음과 같이 작성할 수 있습니다.

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

var eventUtil = {
getRelateTarget:function(event){
if (event.관련Target) {
return event.관련Target
}else if(event; .fromElement) {
return event.fromElement;
}else if(event.toElement){
return event.toElement
}else {
return null; >}
}



c)버튼

클릭 이벤트는 마우스 기본 버튼이 요소를 클릭할 때(또는 요소에 초점을 맞추고 Enter 키를 누를 때)에만 트리거됩니다. mousedown 및 mouseup의 경우 이벤트 객체 이벤트에 속성 버튼이 있어 어떤 키를 누르거나 놓을지 결정할 수 있습니다. DOM에는 일반적으로 세 가지 가능한 버튼 속성 값이 구현됩니다.

0: 기본 키를 나타냅니다.

1: 스크롤 휠을 나타냅니다.

2: 나타냅니다. 보조 키.

일반적으로 기본 키는 마우스 왼쪽 버튼을 나타내고 보조 키는 마우스 오른쪽 버튼을 나타냅니다.

IE8부터는 버튼 속성도 제공되지만 값 범위가 전혀 다릅니다.

0: 버튼을 누르지 않음,

1: 기본 키를 눌렀습니다. 눌림,

　2: 보조 키가 눌렸음을 나타냄,

　3: 메인 키와 보조 키가 모두 눌렸음을 나타냄,

　4: 중간 키를 나타냄

　5 : 기본키와 미들웨어를 눌렀음을 의미

　6 : 보조키와 중간키를 눌렀음을 의미,

　7 : 를 눌렀음을 의미 세 개의 키를 모두 눌렀는지 확인합니다.

DOM 모델 하의 ​​버튼 속성의 값 범위가 IE 모델 하의 ​​값 범위보다 훨씬 단순하다는 것을 알 수 있고, 개인적으로 IE 하에서의 동작 상황이 조금 비정상적이라고 느낍니다.

d) 기타 이벤트 정보

DOM2 레벨 이벤트에서는 클릭 이벤트와 같은 추가 이벤트 정보를 제공하기 위해 이벤트 객체 이벤트에 대한 세부 속성도 제공됩니다. 예를 들어, Detail은 동일한 픽셀 위치에서 클릭 수를 기록할 수 있으며, Detail의 값은 1부터 계산되며, 마우스를 클릭할 때마다 1이 추가됩니다. mousedown과 mouseup 사이에서 이 값은 지워집니다.

먼저 마우스 이벤트에 대해 작성하고 앞으로 천천히 완성해 나가겠습니다.