다양한 브라우저에서 js 마우스 클릭 이벤트를 작성하는 방법 및 이벤트 객체 속성 소개_기본 지식

IE
왼쪽 버튼은 window.event.button = 1
오른쪽 버튼은 window.event.button = 2
가운데 버튼은 window.event.button = 4
버튼 없음 작업 window.event.button = 0

Firefox
왼쪽 버튼은 event.button = 0
오른쪽 버튼은 event.button = 2
가운데 버튼은 이벤트 버튼 = 1
키 동작 없음 event.button = 0

Opera 7.23/7.54
마우스 왼쪽 버튼은 window.event입니다. 버튼 = 1
키 동작 없음 window.event.button = 1
오른쪽 및 가운데 버튼을 얻을 수 없음

Opera 7.60/8.0
왼쪽 마우스 버튼 is window.event.button = 0
None 키 동작 window.event.button = 0
오른쪽 버튼과 가운데 버튼을 얻을 수 없습니다

또한 오른쪽 버튼은 창에 의해 차단됩니다. event.button = 3

********* ******************************** ******************* ***

Window.event 개체는 이벤트 개체를 트리거한 요소, 마우스의 위치와 상태, 누른 키 등
Window.event 개체는 이벤트 기간 동안에만 유효합니다.
Window.event의 일부 속성은 특정 이벤트에만 의미가 있습니다. 예를 들어 fromElement 및 toElement 속성은 onmouseover 및 onmouseout 이벤트에만 의미가 있습니다.
이벤트가 발생한 후 마우스가 창 밖으로 이동하면 반환되는 값은 읽기 전용 속성인 -1입니다. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.

이벤트 개체의 속성은 :
altKey, 버튼, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY입니다. , ShiftKey , srcElement, srcFilter, toElement, type, x, y

다음은 해당 속성에 대한 간략한 설명입니다:
1.altKey
설명 : Alt 키의 상태를 확인합니다.
구문: event.altKey
가능한 값: Alt 키를 누르면 TRUE, 그렇지 않으면 FALSE. 읽기 전용입니다.

2.button
설명: 눌려진 마우스 버튼을 확인합니다.
구문: event.button
가능한 값:
0 버튼을 누르지 마세요. 1 왼쪽 버튼을 누르세요. 2 오른쪽 버튼을 누르세요. 4 가운데 버튼을 누르세요. 왼쪽 및 가운데 버튼 6 오른쪽 및 가운데 키 누르기 7 모든 키 누르기
이 속성은 onmousedown, onmouseup 및 onmousemove 이벤트에만 사용됩니다. 다른 이벤트의 경우 마우스 상태(예: onclick)에 관계없이 0이 반환됩니다.

3.cancelBubble
설명: 상위 요소의 이벤트에 대한 제어 허용 여부를 감지합니다.
구문: event.cancelBubble[ = cancelBubble]
가능한 값: 읽기 및 쓰기가 가능한 부울 값입니다.
TRUE는 상위 요소의 이벤트에 의해 제어되지 않습니다.
FALSE를 사용하면 상위 요소의 이벤트로 제어할 수 있습니다. 이것이 기본값입니다.

4.clientX
설명: 창의 클라이언트 영역에서 마우스의 X 좌표를 반환합니다.
구문: event.clientX
설명: 읽기 전용 속성입니다. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.

5.clientY
설명: 창의 클라이언트 영역에서 마우스의 Y 좌표를 반환합니다.
구문: event.clientY
설명: 읽기 전용 속성입니다. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.

6.ctrlKey
설명: Ctrl 키의 상태를 확인합니다.
구문: event.ctrlKey
가능한 값: Ctrl 키를 누른 경우 TRUE, 그렇지 않은 경우 FALSE. 읽기 전용입니다.

7.fromElement
설명: onmouseover 및 onmouseout 이벤트가 발생할 때 마우스가 떠나는 요소를 감지합니다. 참조 18.toElement
구문: event.fromElement
참고: 이는 읽기 전용 속성입니다.

8.keyCode
설명: 키보드 이벤트에 해당하는 내부 코드를 감지합니다. 이 속성은 onkeydown, onkeyup 및 onkeypress 이벤트에 사용됩니다.
구문: event.keyCode[ = keyCode]
가능한 값: 읽고 쓸 수 있는 값이며 모든 유니코드 키보드 내부 코드일 수 있습니다. 키보드 이벤트가 발생하지 않은 경우 값은 0 입니다.

9.offsetX
설명: 이벤트를 트리거한 개체를 기준으로 마우스 위치의 수평 좌표를 확인합니다.
구문: event.offsetX

10.offsetY
설명: 이벤트를 트리거한 개체를 기준으로 마우스 위치의 수직 좌표를 확인합니다.
구문: event.offsetY

11.propertyName
설명: 요소의 변경된 속성 이름을 설정하거나 반환합니다.
구문: event.propertyName [= sProperty]
가능한 값: sProperty는 이벤트를 트리거한 요소의 이벤트에서 변경된 속성의 이름을 지정하거나 반환하는 문자열입니다.
참고: 이 속성은 읽고 쓸 수 있습니다. 기본값이 없습니다. onpropertychange 이벤트를 사용하여 propertyName의 값을 가져올 수 있습니다.

12.returnValue
설명: 이벤트에서 반환된 값을 설정하거나 확인합니다.
구문: event.returnValue[=Boolean]
가능한 값: true 이벤트 값이
false로 반환되고 소스 객체에 대한 이벤트의 기본 동작이 취소됩니다.

13.screenX
설명: 13.screenX를 기준으로 마우스의 수평 위치를 감지합니다. 사용자 화면
구문: event.screenX
설명: 읽기 전용 속성입니다. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.

14.screenY
설명: 사용자 화면을 기준으로 마우스의 수직 위치를 감지합니다.
구문: event.screenY
댓글: 읽기입니다. 유일한 재산. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.

15.shiftKey
설명: Shift 키의 상태를 확인합니다.
구문: event.shiftKey
가능한 값: Shift 키를 누른 경우 TRUE, 그렇지 않은 경우 FALSE. 읽기 전용입니다.

16.srcElement
설명: 이벤트를 트리거한 요소를 반환합니다. 읽기 전용입니다. 이 글의 시작 부분에 있는 예시를 참조하세요.
구문: event.srcElement

17.srcFilter
설명: onfilterchange 이벤트를 트리거하는 필터를 반환합니다. 읽기 전용입니다.
구문: event.srcFilter

18.toElement
설명: onmouseover 및 onmouseout 이벤트가 발생할 때 마우스가 입력하는 요소를 감지합니다. 참조 7.fromElement
구문: event.toElement
참고: 이는 읽기 전용 속성입니다.

19.type
설명: 이벤트 이름을 반환합니다.
구문: event.type
참고: "on"을 접두사로 사용하지 않고 이벤트 이름을 반환합니다. 예를 들어 onclick 이벤트에서 반환된 유형은 클릭 읽기 전용입니다.

20.x
설명: CSS 속성에 position 속성이 있는 상위 요소를 기준으로 마우스의 x축 좌표를 반환합니다. css 속성에 position 속성을 가진 상위 요소가 없으면 기본적으로 BODY 요소가 참조 개체로 사용됩니다.
구문: event.x
참고: 이벤트가 발생한 후 마우스가 창 밖으로 이동하면 반환되는 값은 -1입니다.
이것은 읽기 전용 속성입니다. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.

21.y
설명: CSS 속성에 position 속성을 사용하여 상위 요소를 기준으로 마우스의 y축 좌표를 반환합니다. css 속성에 position 속성을 가진 상위 요소가 없으면 기본적으로 BODY 요소가 참조 개체로 사용됩니다.
구문: event.y