Keydown, keyup, keypress: your keyboard keys
Mousedown, mouseup: your mouse button
A keydown event occurs when the button is pressed,
Keyup is triggered only when the user raises the key,
The complete key press process is divided into two parts: 1. The key is pressed; 2. The key is released.
Mousedown occurs when you press the mouse key on this element.
Mouseup occurs when you release the mouse key on this element.
Example
1. Which mouse button is clicked?
<Html>
<Head>
<Script type = "text/javascript">
Function whichButton (event)
{
If (event. button = 2)
{
Alert ("right-click! ")
}
Else
{
Alert ("you clicked the left mouse button! ")
}
}
</Script>
</Head>
<Body onmousedown = "whichButton (event)">
<P> click the left or right-click your mouse to try it. </p>
</Body>
</Html>
Run the code copy code save the code [Ctrl + A Select All Note: to introduce external Js, refresh it before execution]
2. What are the coordinates of the current mouse cursor?
<Html>
<Head>
<Script type = "text/javascript">
Function show_coords (event)
{
X = event. clientX
Y = event. clientY
Alert ("X coordinate:" + x + ", Y coordinate:" + y)
}
</Script>
</Head>
<Body onmousedown = "show_coords (event)">
<P> In this document, click the left button to see it! </P>
</Body>
</Html>
Run the code copy code save the code [Ctrl + A Select All Note: to introduce external Js, refresh it before execution]
3. What is the unicode code of the pressed key?
<Html>
<Head>
<Script type = "text/javascript">
Function whichButton (event)
{
Alert (event. keyCode)
}
</Script>
</Head>
<Body onkeyup = "whichButton (event)">
<P> press a key on your keyboard in this document. </p>
</Body>
</Html>
Run the code copy code save the code [Ctrl + A Select All Note: to introduce external Js, refresh it before execution]
4. What are the coordinates of the current mouse cursor relative to the screen?
<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>
Click the left button
</P>
</Body>
</Html>
Run the code copy code save the code [Ctrl + A Select All Note: to introduce external Js, refresh it before execution]
5. What are the coordinates of the current mouse cursor?
<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>
Click the left button
</P>
</Body>
</Html>
Run the code copy code save the code [Ctrl + A Select All Note: to introduce external Js, refresh it before execution]
6. Shift key press?
<Html>
<Head>
<Script type = "text/javascript">
Function isKeyPressed (event)
{
If (event. shiftKey = 1)
{
Alert ("shit key pressed! ")
}
Else
{
Alert ("The shit key is not pressed! ")
}
}
</Script>
</Head>
<Body onmousedown = "isKeyPressed (event)">
<P> Press the shit key and click the left button </p>
</Body>
</Html>
Run the code copy code save the code [Ctrl + A Select All Note: to introduce external Js, refresh it before execution]
7. Which element is clicked currently?
<Html>
<Head>
<Script type = "text/javascript">
Function whichElement (e)
{
Var targ
If (! E) var e = window. event
If (e.tar get) targ = e.tar get
Else if (e. srcElement) targ = e. srcElement
If (targ. nodeType = 3) // defeat Safari bug
Targ = targ. parentNode
Var tname
Tname = targ. tagName
Alert ("you clicked" + tname + "element ")
}
</Script>
</Head>
<Body onmousedown = "whichElement (event)">
<P> Click here to see if it is p </p>
<H3> or click here, which is h3 <P> Do you want to order me ?? </P>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
