PHP MySQL jquery HTML CSS

HTML DOM 教程 HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM - 修改 HTML DOM - 修改 HTML 内容 HTML DOM - 元素 HTML DOM - 事件 HTML DOM 导航 HTML DOM总结 HTML DOM 实例 HTML DOM 对象

HTML DOM 教程

HTML DOM 教程 HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM - 修改 HTML DOM - 修改 HTML 内容 HTML DOM - 元素 HTML DOM - 事件 HTML DOM 导航 HTML DOM总结 HTML DOM 实例

DOM 参考手册

HTML DOM 对象

HTML DOM中文参考手册

更新时间2022-04-13

HTML DOM - 元素 HTML DOM 导航

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

对事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

在本例中，当用户点击时，会改变 <h1> 元素的内容：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

在本例中，会从事件处理程序中调用函数：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

实例

<!DOCTYPE html>
<html>
<html>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button onclick="displayDate()">Try it</button>

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

<p id="demo"></p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

在上面的例子中，当点击按钮时，会执行名为 displayDate 的函数。

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：

实例

<html><!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click the button to execute the <em>displayDate()</em> function.</p>

<button id="myBtn">Try it</button>

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

<p id="demo"></p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。

当按钮被点击时，将执行函数。

onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

实例

<html><!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>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

onchange 事件

onchange 事件常用于输入字段的验证。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

实例

<html><!DOCTYPE html>
<html>
<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 事件。

实例

<html><!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click 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>

运行实例 »

点击 "运行实例" 按钮查看在线实例