Obsluha udalostí cez JavaScript
JavaScript -> Ukážkové programy v JavaScripte -> Obsluha udalostí cez JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Event Bindings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload='alert("Event demo loaded");' onunload='alert("Leaving demo");'>
<h1 align="center">HTML Event Bindings</h1>
<form action="#" method="get" onreset="alert('Form reset');"
onsubmit="alert('Form submit');return false;">
<ul>
<li>onblur:
<input type="text" value="Click into field and then leave" size="40"
onblur="alert('Lost focus');"><br><br></li>
<li>onclick:
<input type="button" value="Click me"
onclick="alert('Button click');"><br><br></li>
<li>onchange:
<input type="text" value="Change this text then leave" size="40"
onchange="alert('Changed');"><br><br></li>
<li>ondblclick:
<input type="button" value="Double-click me"
ondblclick="alert('Button double-clicked');"><br><br></li>
<li>onfocus:
<input type="text" value="Click into field"
onfocus="alert('Gained focus');"><br><br></li>
<li>onkeydown:
<input type="text" value="Press key and release slowly here" size="40"
onkeydown="alert('Key down');"><br><br></li>
<li>onkeypress:
<input type="text" value="Type here" size="40"
onkeypress="alert('Key pressed');"><br><br></li>
<li>onkeyup:
<input type="text" value="Press a key and release it" size="40"
onkeyup="alert('Key up');"><br><br></li>
<li>onload: An alert was shown when the document loaded.<br><br></li>
<li>onmousedown:
<input type="button" value="Click and hold"
onmousedown="alert('Mouse down');"><br><br></li>
<li>onmousemove: Move mouse over this
<a href="#"
onmousemove="alert('Mouse moved');">link</a><br><br></li>
<li>onmouseout: Position mouse
<a href="#"
onmouseout="alert('Mouse out');">here</a> and then away.<br><br></li>
<li>onmouseover: Position mouse over this
<a href="#"
onmouseover="alert('Mouse over');">link</a><br><br></li>
<li>onmouseup:
<input type="button" value="Click and release"
onmouseup="alert('Mouse up');"><br><br></li>
<li>onreset:
<input type="reset" value="Reset Demo"><br><br></li>
<li>onselect:
<input type="text" value="Select this text" size="40"
onselect="alert('selected');"><br><br></li>
<li>onsubmit:
<input type="submit" value="Test submit"><br><br></li>
<li>onunload: Try to leave document by following this
<a href="http://www.google.com">link</a><br><br></li>
</ul>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Event Bindings</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload='alert("Event demo loaded");' onunload='alert("Leaving demo");'>
<h1 align="center">HTML Event Bindings</h1>
<form action="#" method="get" onreset="alert('Form reset');"
onsubmit="alert('Form submit');return false;">
<ul>
<li>onblur:
<input type="text" value="Click into field and then leave" size="40"
onblur="alert('Lost focus');"><br><br></li>
<li>onclick:
<input type="button" value="Click me"
onclick="alert('Button click');"><br><br></li>
<li>onchange:
<input type="text" value="Change this text then leave" size="40"
onchange="alert('Changed');"><br><br></li>
<li>ondblclick:
<input type="button" value="Double-click me"
ondblclick="alert('Button double-clicked');"><br><br></li>
<li>onfocus:
<input type="text" value="Click into field"
onfocus="alert('Gained focus');"><br><br></li>
<li>onkeydown:
<input type="text" value="Press key and release slowly here" size="40"
onkeydown="alert('Key down');"><br><br></li>
<li>onkeypress:
<input type="text" value="Type here" size="40"
onkeypress="alert('Key pressed');"><br><br></li>
<li>onkeyup:
<input type="text" value="Press a key and release it" size="40"
onkeyup="alert('Key up');"><br><br></li>
<li>onload: An alert was shown when the document loaded.<br><br></li>
<li>onmousedown:
<input type="button" value="Click and hold"
onmousedown="alert('Mouse down');"><br><br></li>
<li>onmousemove: Move mouse over this
<a href="#"
onmousemove="alert('Mouse moved');">link</a><br><br></li>
<li>onmouseout: Position mouse
<a href="#"
onmouseout="alert('Mouse out');">here</a> and then away.<br><br></li>
<li>onmouseover: Position mouse over this
<a href="#"
onmouseover="alert('Mouse over');">link</a><br><br></li>
<li>onmouseup:
<input type="button" value="Click and release"
onmouseup="alert('Mouse up');"><br><br></li>
<li>onreset:
<input type="reset" value="Reset Demo"><br><br></li>
<li>onselect:
<input type="text" value="Select this text" size="40"
onselect="alert('selected');"><br><br></li>
<li>onsubmit:
<input type="submit" value="Test submit"><br><br></li>
<li>onunload: Try to leave document by following this
<a href="http://www.google.com">link</a><br><br></li>
</ul>
</form>
</body>
</html>
Pozri aj
Udalosti jazyka JavaScript
Chat ku článku
Martin Kasman, M Software
Smreková 3095/23
Email: martin@kasman.sk
Telefón: 0908 270 294