이벤트 이벤트 설명
event
： altKey, shiftKey, ctrlKey,
button, clientX, clientY, keyCode, offsetX, offsetY, propertyName,
returnvalue, screenX, screenY, srcElement, srcFilter,
type, x, y
--------------------------------------------------------------------------------
1.altKey
alt 。 ：
event.altKey ：
alt ， TRUE ， FALSE 。 。
shiftKey, ctrlKey
2.button
。 ：
event.button ：
0
1
2
3
4
5
6
7 onmousedown, onmouseup, onmousemove 。
， ， 0（ onclick）。
3.clientX
：
X 。 ：
event.clientX ：
。 ， ， 。
4.clientY
：
Y 。 ：
event.clientY ：
。 ， ， 。
5.ctrlKey
：
ctrl 。 ：
event.ctrlKey ：
ctrl ， TRUE ， FALSE 。 。
6.keyCode
：
。
onkeydown, onkeyup, onkeypress 。 ：
event.keyCode[ = keyCode]
：
， Unicode 。 ， 0 。
7.offsetX
：
， ：
event.offsetX
8.offsetY
：
， ：
event.offsetY
9.propertyName
：
。 ：
event.propertyName [ = sProperty ] ：
sProperty ， 。
。 。 ：
onpropertychange ， propertyName 。 ：
onpropertychange ， ， propertyName 。 <HEAD>
<SCRIPT>
function changeProp()
{
btnProp.value = "This is the new value";
}
function changeCSSProp()
{
btnStyleProp.style.backgroundColor = "aqua";
}
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is
used here to return which property has been
altered.</P> <INPUT TYPE=button ID=btnProp onclick="changeProp()"
value="Click to change the value property of this button"
onpropertychange=’alert(event.propertyName+" property has changed value")’>
<INPUT TYPE=button ID=btnStyleProp
onclick="changeCSSProp()"
value="Click to change the CSS backgroundColor property of this button"
onpropertychange=’alert(event.propertyName+" property has changed value")’>
</BODY>
10.returnvalue
：
：
event.returnvalue[ = Boolean] ：
true
false 。
11.screenX
：
：
event.screenX
：
。 ， ， 。
12.screenY
：
：
event.screenY ：
。 ， ， 。
13.srcElement
：
。 。 。 ：
event.srcElement
14.srcFilter
：
onfilterchange 。 。 ：
event.srcFilter
15.type
：
。 ：
event.type ：
“on” ， ，onclick type click
。
16. x
：
css position x 。 css position ， BODY 。 ：
event.x ：
， ， -1
。 ， ， 。
17. y
：
css position y 。 css position ， BODY 。 ：
event.y ：
， ， -1
。 ， ，
event.clientX,clientY,x,y,offsetX,offsetY,screenX,screenY의 차이
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> </TITLE>
<style>
*{
margin:0}
#d1{
position:absolute;
left:50px;
top:50px;
width:600px ;
height:500px ;
border:2px blue solid;
}
#d0{
position:relative;
left:50px;
top:50px;
width:700px ;
height:600px ;
border:2px blue solid;
}
</style>
</HEAD>
<SCRIPT>
function dullwolf() {
if (!document.all)
var evt=arguments[0];
else
var evt=event;
p1.innerText=window.event.x;
p2.innerText=window.event.y;
p3.innerText=window.event.clientX;
p4.innerText=window.event.clientY;
p5.innerText=window.event.offsetX;
p6.innerText=window.event.offsetY;
p7.innerText=window.event.screenX;
p8.innerText=window.event.screenY;
}
</SCRIPT>
<body onmousemove="dullwolf();">
<div id="d0">
D0
<div id="d1">
D1<BR/>
event.x=<span id="p1"> </span>;
event.y=<span id="p2"> </span>;
clientX=<span id="p3"> </span> ;
clientY=<span id="p4"> </span> ; <br>
offsetX=<span id="p5"> </span> ;
offsetY=<span id="p6"> </span> ;
screenX=<span id="p7"> </span> ;
screenY=<span id="p8"> </span>;
<p>test</p>
<p>test</p>
</div>
</div>
</body>
</HTML>
scrollLeft: 웹 페이지의 폭이 화면 폭을 초과하고 오른쪽으로 일부 웹 페이지를 굴렀을 때, 이 값은 웹 페이지의 왼쪽이 말린 폭을 나타냅니다.
scrollTop: 위와 같이 웹 페이지의 위쪽이 말아 올린 높이입니다.
따라서 웹 페이지가 스크롤된 경우(스크롤 막대가 있고 스크롤된 경우) 마우스의 좌표는 다음과 같습니다.
x=event.clientX+document.body.scrollLeft;
y=event.clientY+document.body.scrollTop;
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
