js 마우스 버튼 이벤트 및 키보드 버튼 이벤트 사용에 대해-JS 튜토리얼-php.cn

js 마우스 버튼 이벤트 및 키보드 버튼 이벤트 사용에 대해

不言

풀어 주다： 2018-06-30 11:26:22

원래의

1578명이 탐색했습니다.

이 글은 주로 js 마우스 버튼 이벤트와 키보드 버튼 이벤트의 사용법을 소개합니다. 마우스와 키보드 이벤트에 대한 자바스크립트의 일반적인 동작 기법을 예제 형식으로 요약하고 분석합니다. 도움이 필요한 친구들이 참고할 수 있습니다. js 마우스 버튼 이벤트와 키보드 키 이벤트 사용법. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

keydown, keyup, keypress: 귀하에게 속한 키보드 키

mousedown, mouseup: 귀하에게 속한 마우스 버튼

버튼을 누르면 keydown

keyup 이벤트가 발생하면 사용자가 키를 눌렀을 때 트리거됩니다. 전체 키 누르기 과정은 두 부분으로 나뉩니다. 1. 키를 눌렀습니다. 2. 키를 뗐습니다.

사용자가 이 요소에서 마우스 버튼을 누르면 mousedown이 발생합니다.

사용자가 이 요소에서 마우스 버튼을 놓으면 mouseup이 발생합니다.

Example

1. 어떤 마우스 버튼이 클릭되었는지

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("你点击了鼠标右键!")
}
else
{
alert("你点击了鼠标左键!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请单击你鼠标的左键或右键试试</p>
</body>
</html>

로그인 후 복사

2. 마우스 커서의 현재 좌표는 무엇입니까

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 坐标： " + x + ", Y 坐标： " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>在此文档中按下你鼠标的左键看看！</p>
</body>
</html>

로그인 후 복사

3. 누른 키의 유니코드 코드는 무엇입니까

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p>在此文档中按下你键盘上的某个键看看</p>
</body>
</html>

로그인 후 복사

4. 화면을 기준으로 한 현재 마우스 커서의 좌표는 무엇입니까

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

로그인 후 복사

5. 현재 마우스 커서의 좌표는 무엇인가요

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.x
y=event.y
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
点击你鼠标的左键
</p>
</body>
</html>

로그인 후 복사

6. Shift 키가 눌려져 있나요

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("shit键按下了!")
}
else
{
alert("shit键没有按下!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p>按下shit键，点击你鼠标的左键</p>
</body>
</html>

로그인 후 복사

7. 현재 클릭된 요소는 무엇인가요

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("你点击了 " + tname + "元素")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在这里点击看看，这里是p</p>
<h3>或者点击这里也可以呀，这里是h3</h3>
<p>你想点我吗？？</p>
<img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic">
</body>
</html>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. , 여러분에게 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요! 관련 추천 :

JS 함수 호출 스택 크기 계산 방법에 대하여

JavaScript 이미지 확대 기술 구현

위 내용은 js 마우스 버튼 이벤트 및 키보드 버튼 이벤트 사용에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!