对事件反应
当事件发生时,可以执行 JavaScript,比如用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中:
οnclick=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 元素分配事件,你可以使用事件属性。
<!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>
参考:
https://www.yuque.com/docs/share/4c382ce2-8253-4818-aab1-8e0d89b77947