对事件反应
当事件发生时，可以执行 JavaScript，比如用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=
JavaScript
HTML 事件的例子：
当用户点击鼠标时；当网页已加载时；
当图片已加载时；当鼠标移动到元素上时；
当输入字段被改变时；当 HTML 表单被提交时；
当用户触发按键时
下面的例子，当用户点击，会改变<h1>元素的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
</head>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<script>
function changeText(id) {
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changeText(this)">点击文本!</h1>
</body>
</html>
HTML 事件属性
如需向HTML 元素分配事件，你可以使用事件属性。
扫描二维码关注公众号，回复：
938665 查看本文章
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
</head>
<body>
<p>点击按钮执行<em>displayDate()</em></p>
<button onclick="displayDate()">点我</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
使用HTML DOM来分配事件
HTML DOM 允许你使用 JavaScript 向HTML元素分配事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
</head>
<body>
<p>点击按钮执行<em>displayDate()</em></p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate();}
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
onload 和 onunload 事件
当用户进入或离开页面时，会触发onload 和 onunload 事件
onload 事件用于检查访客的浏览器类型和版本，以便基于这些信息加载不同版本的网页。
onload 和 onload 事件可用于处理cookies。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookie 可用")
}
else
{
alert("Cookie 不可用")
}
}
</script>
<p id="demo">页面载入时，弹出浏览器 Cookie 可用状态</p>
</body>
</html>
onchange 事件
onchange 事件常用于输入字段的验证。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<script>
function myFunction() {
var x=document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body >
输入你的名字：<input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>
onmouseover 和 onmouseout 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
</head>
<body >
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You";
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me";
}
</script>
</body>
</html>
onmousedown、onmouseup以及onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
</head>
<body >
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px">
Mouse Over Me
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me";
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>