HTML DOM - 事件处理方式_html中事件变化处理-优快云博客

本文链接：https://blog.youkuaiyun.com/jinhoward/article/details/53457841

本文介绍了HTML中几种常见的事件处理方式，包括使用函数改变文本内容、按钮点击事件展示日期、页面加载时检查Cookie状态以及文本框内容变化时转为大写等示例。

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

一、html中事件处理之用函数来处理

<!DOCTYPE html>
<html>
<head>

<script>function changetext(clickedObject){
   clickedObject.innerHTML="Click is So Cool!";}
</script></head>

<body>
 <h1 onclick="changetext(this)">请点击这段文本！</h1></body>

</html>

二、按钮的点击事件

<!DOCTYPE html>
<html>
<body>

<p>点击按钮执行点击函数的示例</p>

<button onclick="showDate()">显示日期</button>

<script>
function showDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"><strong>Miracle will happen!</stong></p>

</body>
</html>

三、onLoad（）方法的使用

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>

<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

四、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" 
onchange="myFunction()">


<p>当光标的焦点离开输入框时，被触发的函数会将您输入的文本转换为大写字母。</p>

</body>
</html>

<!DOCTYPE html><html><head><script>function changetext(clickedObject){

clickedObject

.innerHTML="Click is So Cool!";}</script></head><body><h1 onclick="changetext(this)">请点击这段文本！</h1></body></html>

二、按钮的点击事件

<!DOCTYPE html>
<html>
<body>

<p>点击按钮执行点击函数的示例</p>

<button onclick="showDate()">显示日期</button>

<script>
function showDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"><strong>Miracle will happen!</stong></p>

</body>
</html>