HTML 事件属性
2025-05-15
使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 Java|script|。
窗口事件
- 由窗口触发该事件 (适用于
<body>标签)
| 属性名 | 值 | 说明 |
|---|---|---|
| onafterprint5️⃣ | script | 在打印文档之后运行脚本 |
| onbeforeprint5️⃣ | script | 在文档打印之前运行脚本 |
| onbeforeonload5️⃣ | script | 在文档加载之前运行脚本 |
| onblur | script | 当窗口失去焦点时运行脚本 |
| onerror5️⃣ | script | 当错误发生时运行脚本 |
| onfocus | script | 当窗口获得焦点时运行脚本 |
| onhashchange5️⃣ | script | 当文档改变时运行脚本 |
| onload | script | 当文档加载时运行脚本 |
| onmessage5️⃣ | script | 当触发消息时运行脚本 |
| onoffline5️⃣ | script | 当文档离线时运行脚本 |
| ononline5️⃣ | script | 当文档上线时运行脚本 |
| onpagehide5️⃣ | script | 当窗口隐藏时运行脚本 |
| onpageshow5️⃣ | script | 当窗口可见时运行脚本 |
| onpopstate5️⃣ | script | 当窗口历史记录改变时运行脚本 |
| onredo5️⃣ | script | 当文档执行再执行操作（redo）时运行脚本 |
| onresize5️⃣ | script | 当调整窗口大小时运行脚本 |
| onstorage5️⃣ | script | 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本 |
| onundo5️⃣ | script | 当文档执行撤销时运行脚本 |
| onunload5️⃣ | script | 当用户离开文档时运行脚本 |
<script>
function onload()
{
document.getElementById("demo").innerHTML = "hello world";
}
</script>
<body onresize="onload()">
<p id="demo">hi there</p>
</body>表单事件
- 由表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内):
| 属性名 | 值 | 说明 |
|---|---|---|
| onblur | script | 当元素失去焦点时运行脚本 |
| onchange | script | 当元素改变时运行脚本 |
| oncontextmenu5️⃣ | script | 当触发上下文菜单时运行脚本 |
| onfocus | script | 当元素获得焦点时运行脚本 |
| onformchange5️⃣ | script | 当表单改变时运行脚本 |
| onforminput5️⃣ | script | 当表单获得用户输入时运行脚本 |
| oninput5️⃣ | script | 当元素获得用户输入时运行脚本 |
| oninvalid5️⃣ | script | 当元素无效时运行脚本 |
| onreset | script | 当表单重置时运行脚本。HTML 5 不支持。 |
| onselect | script | 当选取元素时运行脚本 |
| onsubmit | script | 当提交表单时运行脚本 |
<script>
function upperCase(val)
{
// var x=document.getElementById("fname").value
document.getElementById("fname").value=val.toUpperCase()
}
function checkField(val)
{
// var x=document.getElementById("text").value
document.getElementById("txt").value=val + " 以改变";
}
function showMsg(val)
{
// var x=document.getElementById("text").value
document.getElementById("text").value=val +"已选中";
}
function checkForm()
{
alert("提交表单");
}
</script>
<form action="#" onsubmit="checkForm()">
<p>鼠标移开后小写会转换为大写: <input type="text" name="fname" id="fname" onblur="upperCase(this.value)"> </p>
<p>失去焦点，内容由变化后恢复初始值: <input type="text" name="txt" id="txt" value="Hello" onchange="checkField(this.value)"> </p>
<p>选中时触发: <input type="text" value="选取我!!" id="text" onselect="showMsg(this.value)"></p>
<input type="submit" value="提交">
</form>键盘事件
- 通过键盘触发事件, 类似用户的行为:
| 属性名 | 值 | 说明 |
|---|---|---|
| onkeydown | ||
| onkeypress | ||
| onkeyup |
<script>
function down()
{
var x;
if(window.event) // IE8 及更早IE版本
x=event.keyCode;
else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
x=event.which;
var keychar=String.fromCharCode(x);
document.getElementById("demo").innerHTML="按键 " + keychar + " 被按下";
}
function up()
{
var x;
if(window.event) // IE8 及更早IE版本
x=event.keyCode;
else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
x=event.which;
var keychar=String.fromCharCode(x);
document.getElementById("demo").innerHTML="按键 " + keychar + " 被松开";
}
function press()
{
var x;
if(window.event) // IE8 及更早IE版本
x=event.keyCode;
else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
x=event.which;
var keychar=String.fromCharCode(x);
document.getElementById("demo").innerHTML="按键 " + keychar + " 被按下并松开";
}
</script>
<p id="demo">提醒按下的键。</p>
<input type="text" name="fname" id="fname" onkeydown="down()" onkeyup="up()" onkeypress="press()">鼠标事件
- 通过鼠标触发事件, 类似用户的行为:
| 属性名 | 值 | 说明 |
|---|---|---|
| onclick | ||
| ondblclick | ||
| ondrag5️⃣ | ||
| ondragend5️⃣ | ||
| ondragenter5️⃣ | ||
| ondragleave5️⃣ | ||
| ondragover5️⃣ | ||
| ondragstart5️⃣ | ||
| ondrop5️⃣ | ||
| onmousedown | ||
| onmousemove | ||
| onmouseout | ||
| onmouseover | ||
| onmouseup | ||
| onmousewheel5️⃣ | ||
| onscroll5️⃣ |
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
function defText()
{
document.getElementById("field2").value="Hi World!";
}
</script>
字段1: <input type="text" id="field1" value="Hello World!"><br>
字段2: <input type="text" id="field2"><br>
<button ondblclick="copyText()" onclick="defText()">单击初始化或双击复制</button>多媒体事件
- 通过视频（videos），图像（images）或者音频（audio） 触发该事件
| 属性名 | 值 | 说明 |
|---|---|---|
| onabort | script | |
| oncanplay5️⃣ | script | |
| oncanplaythrough5️⃣ | script | |
| ondurationchange5️⃣ | script | |
| onemptied5️⃣ | script | |
| onended5️⃣ | script | |
| onerror5️⃣ | script | |
| onloadeddata5️⃣ | script | |
| onloadedmetadata5️⃣ | script | |
| onloadstart5️⃣ | script | |
| onpause5️⃣ | script | |
| onplay5️⃣ | script | |
| onplaying5️⃣ | script | |
| onprogress5️⃣ | script | |
| onratechange5️⃣ | script | |
| onreadystatechange5️⃣ | script | |
| onseeked5️⃣ | script | |
| onseeking5️⃣ | script | |
| onstalled5️⃣ | script | |
| onsuspend5️⃣ | script | |
| ontimeupdate5️⃣ | script | |
| onvolumechange5️⃣ | script | |
| onwaiting5️⃣ | script |
其他事件
| 属性名 | 值 | 说明 |
|---|---|---|
| onshow5️⃣⚠️ | script | 当 <menu> 元素在上下文显示时触发目前只有 Firefox 浏览器支持 onshow 属性 |
| ontoggle5️⃣⚠️ | script | 当用户打开或关闭 <details> 元素时触发目前只有 Chrome, Safari 6+, 和 Opera 15+ 浏览器支持 details 元素和 ontoggle 属性。 |
<details ontoggle="myFunction()">
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<p><strong>注意:</strong> 目前只有 Chrome, Safari 6+, 和 Opera 15+ 浏览器支持 details 元素和 ontoggle 属性。</p>
<script>
function myFunction()
{
alert(" ontoggle 事件触发");
}
</script>