<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Mouse Events</title>
<style>
#target {
width: 400px;
height: 400px;
background-color: #990000;
}
</style>
<script>
var target;
var result;
window.onload = function () {
target = document.getElementById('target');
result = document.getElementById('result');
target.onclick = function (e) {
result.innerHTML = "Click event";
console.log(e);
}
target.addEventListener('mouseover', function (e) {
result.innerHTML = 'Mouseover event';
console.log(e);
});
target.onmouseout = function (e) {
result.innerHTML = 'Mouseout event';
console.log(e);
}
}
</script>
</head>
<body>
<div id='target'></div>
<div id='result'></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Keyboard Events</title>
<script>
window.onload = function () {
var textBox = document.getElementById('myText');
textBox.onkeypress = function (e) {
console.log(e);
}
}
</script>
</head>
<body>
<label for="myText">Type Here : </label>
<input type="text" id="myText" />
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Form Events</title>
<script>
window.onload = function () {
var myForm = document.getElementById('myForm');
// onSubmit is called before form is submitted to the server
myForm.onsubmit = function () {
if (document.getElementById('name').value == '') {
// form will not be submitted to server
return false;
}
}
}
</script>
</head>
<body>
<form id="myForm">
<label for="name">Name : </label>
<input type="text" id="name" />
<br/>
<label for="email">Email : </label>
<input type="text" id="email" />
<br/>
<button type="submit">Submit</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Event Object</title>
<style>
#targetA, #targetB {
width: 200px;
height: 200px;
}
#targetA {
background-color: #ff0000;
}
#targetB {
background-color: #0094ff;
margin-top: 20px;
}
</style>
<script>
window.onload = function () {
var a = document.getElementById('targetA');
var b = document.getElementById('targetB');
a.addEventListener('click', processEvent);
b.addEventListener('click', processEvent);
}
function processEvent(e) {
console.log(e);
document.getElementById('result').innerHTML = e.target.id + " was clicked at " + e.clientX + "X " + e.clientY + "Y";
}
</script>
</head>
<body>
<div id="targetA"></div>
<div id="targetB"></div>
<div id="result"></div>
</body>
</html>