javascript_javascript 기술의 altKey 및 Event 속성의 전체 목록
- WBOY원래의
- 2016-05-16 15:33:391500검색
다음은 JavaScript의 altkey 속성에 대한 소개입니다.
altKey 속성의 정의 및 사용법:
이 속성은 부울 값을 반환합니다. 지정된 이벤트가 발생할 때 Alt 키를 길게 눌렀는지 여부를 나타냅니다.
문법 구조:
event.altKey=true|false|1|0
브라우저 지원:
1.IE 브라우저는 이 속성을 지원합니다.
2. Firefox 브라우저는 이 속성을 지원합니다.
3. Opera 브라우저는 이 속성을 지원합니다.
4. Google Chrome은 이 속성을 지원합니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>javascript的altKey事件属性-蚂蚁部落</title>
<style type="text/css">
div{
width:200px;
height:100px;
background-color:#639;
margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.onmousedown=function (event){
if(event.altKey==1){
alert("ALT键已经被按下");
}
else{
alert("ALT键没有被按下");
}
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
위 코드에서는 지정된 div를 클릭하면 ALT 키를 눌렀는지 여부가 팝업됩니다.
Javascript의 전체 이벤트 속성 목록
속성
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 오른쪽 버튼 누르기 3 왼쪽 및 오른쪽 버튼 누르기 4 가운데 버튼 누르기 5 왼쪽 및 가운데 버튼 누르기 6 오른쪽 및 가운데 버튼 누르기 7 모든 키 누르기
이 속성은 onmousedown, onmouseup 및 onmousemove 이벤트에만 사용됩니다. 다른 이벤트의 경우 마우스 상태(예: onclick)에 관계없이 0이 반환됩니다.
3.cancelBubble 설명: 상위 요소의 이벤트 제어 허용 여부를 감지합니다.
구문: event.cancelBubble[ = cancelBubble]
가능한 값: 읽기 및 쓰기가 가능한 부울 값입니다.
TRUE는 상위 요소의 이벤트에 의해 제어되지 않습니다. FALSE를 사용하면 상위 요소의 이벤트로 제어할 수 있습니다. 이것이 기본값입니다.
예: 다음 코드 조각은 이미지를 클릭할 때(onclick) Shift 키도 동시에 누르면 상단 요소(body)의 onclick 이벤트에 의해 트리거되는 showSrc() 함수가 다음과 같이 실행됨을 보여줍니다. 취소.
<SCRIPT type="text/javascript">
function checkCancel() ...{
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc() ...{
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" src="/sample.gif">
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[=부울]
가능한 값: true 이벤트의 값이 반환됩니다. false 소스 개체에 대한 이벤트의 기본 작업이 취소됩니다.
이 글의 시작 부분에 있는 예시를 참조하세요.
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 속성에 위치 속성을 가진 상위 요소가 없는 경우 기본값은
입니다.BODY 요소를 참조 개체로 사용합니다.
구문: event.x
참고: 이벤트가 발생한 후 마우스가 창 밖으로 이동하면 반환되는 값은 -1입니다. 이는 읽기 전용 속성입니다.
즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있고 마우스 위치를 변경하는 데는 사용할 수 없다는 의미입니다.
21.y 설명: css 속성에 position 속성을 사용하여 상위 요소를 기준으로 마우스의 y축 좌표를 반환합니다.
css 속성에 position 속성을 가진 상위 요소가 없으면 기본적으로 BODY 요소가 참조 객체로 사용됩니다.
구문: event.y
참고: 이벤트가 발생한 후 마우스가 창 밖으로 이동하면 반환되는 값은 -1입니다. 이는 읽기 전용 속성입니다. 즉, 마우스의 현재 위치를 가져오는 데만 사용할 수 있지만 마우스 위치를 변경하는 데는 사용할 수 없습니다.