网页事件处理详解-优快云博客

本文介绍了三种定义事件响应的方法：直接定义函数并调用、通过DOM分配及使用addEventListener。此外，还详细解释了常见事件如onload、onchange、onmouseover和onmouseout的功能及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）定义事件响应的方式

1.定义函数并调用

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">Click on this text!</h1>
</body>
</html>

2.通过dom来分配

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

3.通过addEventListener来分配

（2）典型事件

1.onload和onunload事件

1）会在用户进入或离开页面时触发

2）主要用来检测浏览器版本和浏览器类型

3）可以用来处理cookie

<!DOCTYPE html>
<html>
<body οnlοad="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies 可用")
	}
else
	{
	alert("Cookies 不可用")
	}
}
</script>

<p>弹窗-提示浏览器cookie是否可用。</p>
</body>
</html>

2.onchange事件

通常结合对输入字段的验证来使用（当离开的时候触发）

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" οnchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

3.onmouseover和onmouseout事件

用于在用户鼠标移至HTML元素上方或移出元素时触发函数

<!DOCTYPE html>
<html>
<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="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>

dom事件