HTML keyboard events
|
Event
|
Description
|
|
onkeydown
|
Fired on pressing a key
|
|
onkeypress
|
Fired when a key is pressed
|
|
onkeyup
|
Fired on releasing a key
|
HTML mouse events
|
Event
|
Description
|
|
Onclick
|
Fired on clicking the mouse button
|
|
ondblclick
|
Fired on double clicking the mouse button
|
|
ondrag
|
Fired on dragging an element
|
|
ondragend
|
Fired on ending the drag operation
|
|
ondragenter
|
Fired on dropping the dragged element on a valid target
|
|
ondragleave
|
Fired on leaving the valid target while dragging an element
|
|
ondragover
|
Fired on dragging the element over the valid drop target
|
|
ondragstart
|
Fired on starting the drag operation
|
|
ondrop
|
Fired on dropping the dragged element
|
|
onmousedown
|
Fired on pressing the mouse button
|
|
onmousemove
|
Fired on moving the mouse pointer
|
|
onmouseout
|
Fired when the mouse pointer leaves an element
|
|
onmouseover
|
Fired when the mouse pointer moves over an element
|
|
onmouseup
|
Fired on releasing the mouse button
|
|
onmousewheel
|
Fired on rotating the mouse wheel
|
|
onscroll
|
Fired on scrolling the scroll bar of an element
|
Example 1: onclick
event
<!DOCTYPE html>
<html>
<head>
<title>onclick Event</title>
</head>
<body>
<h1>onclick Event</h1>
<form name="event">
Favorite Movie : <input type="text" id="movie" /><br />
<button onclick="alert('Your favorite movie ' + document.getElementById('movie').value)">Click here</button>
</form>
</body>
</html>
Or
<!DOCTYPE html>
<html>
<head>
<title>onclick Event</title>
<script>
function btn_onclick() {
alert('Your favorite movie ' + document.getElementById('movie').value);
}
</script>
</head>
<body>
<h1>onclick Event</h1>
<form name="event">
Favorite Movie : <input type="text" id="movie" /><br />
<button onclick="btn_onclick();">Click here</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>onmousedown Event</title>
<script>
function onmousedown_event() {
alert('Your favorite movie ' + document.getElementById('movie').value);
}
</script>
</head>
<body>
<h1>onmousedown Event</h1>
<form name="event">
Favorite Movie : <input type="text" id="movie" /><br />
<button onmousedown="onmousedown_event();">Click here</button>
</form>
</body>
</html>
Posts
0 comments:
Post a Comment