手册

JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript Break 和 Continue 语句 JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单验证 JavaScript 保留关键字 JavaScript JSON javascript:void(0) 含义 JavaScript 代码规范

JS 函数

JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包

JS HTML DOM

DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高级教程

JavaScript 对象 JavaScript Number 对象 JavaScript String JavaScript Date（日期） JavaScript Array（数组） JavaScript Boolean（布尔） JavaScript Math（算数） JavaScript RegExp 对象

JS 浏览器BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookies

JS 库

JavaScript 库 JavaScript - 测试 jQuery JavaScript - 测试 Prototype

JS 实例

JavaScript 实例 JavaScript 对象实例 JavaScript Browser 对象实例 JavaScript HTML DOM实例 JavaScript总结

JS 参考手册

JavaScript对象 HTML DOM 对象

首页大前端 JavaScript JavaScript中文参考手册

DOM 事件

阅读92909

更新时间2022-04-15

DOM CSS

DOM EventListener

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

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

onclick=JavaScript

HTML 事件的例子：

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

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

</body>
</html>

运行实例 »

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

本例从事件处理器调用一个函数：

实例

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

运行实例 »

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

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

使用 HTML DOM 来分配事件

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

实例

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

运行实例 »

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

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

按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件

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

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器cookie是否可用。</p>
	
</body>
</html>

运行实例 »

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

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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 元素上方或移出元素时触发函数。

实例

一个简单的 onmouseover-onmouseout 实例：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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 事件。

实例

一个简单的 onmousedown-onmouseup 实例：

Thank You

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function lighton(){
	document.getElementById('myimage').src="/upload/course/000/000/009/5804353cb2562758.gif";
}
function lightoff(){
	document.getElementById('myimage').src="/upload/course/000/000/009/580432b53cb5d221.gif";
}
</script>
</head>

<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/upload/course/000/000/009/580432b53cb5d221.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

运行实例 »

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

onload
当页面完成加载时，显示一个提示框。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function mymessage(){
	alert("消息在 onload 事件触发后弹出。");
}
</script>
</head>

<body onload="mymessage()"></body>

</html>

运行实例 »

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

onfocus
当输入字段获得焦点时，改变其背景色。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
</head>
<body>

输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

</body>
</html>

运行实例 »

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

鼠标事件
当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文字上</h1>

</body>
</html>

运行实例 »

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

DOM CSS

DOM EventListener