html-----020----事件
html事件
<body> <a href="http://www.cctv.com" accesskey="k" target="_blank">按alt键加上k键可以实现跳转</a> <br /> <a href="http://www/baidu.com" accesskey="l" target="_blank">按alt键和l键可以跳转到百度</a> <!--注释：以下元素支持 accesskey 属性： <a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>--> </body> </html>
<title>无标题文档</title> <style type="text/css"> h1.intro{color:red; text-align:center;} .imo{ background-color:blue;} </style> </head> <body> <!--注释：class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。--> <h1 class="intro">中华人民共和国</h1> <h1 class="imo intro">可以插入多个css样式</h1> </body> </html>
<!--class 规定元素的一个或多个类名（引用样式表中的类）-->
<body> <!--contenteditable 属性规定元素内容是否可编辑。--> <p contenteditable="true">这是一个可编辑的段落</p> <p contenteditable="false">这是一个不可编辑的段落.默认</p> <!--dir 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。--> <p dir="ltr" >笑傲江湖</p><!--默认：从左到右--> <p dir="rtl" >笑傲江湖</p><!--从右到左--> <!--draggable 规定元素是否可拖动。--> <p draggable="auto">令狐冲</p><!--使用浏览器的默认行为。--> <p draggable="false">令狐冲</p><!--规定元素不可拖动--> <p draggable="true">令狐冲</p><!--规定元素可以拖动--> <!--目前所有主流浏览器都不支持 contenteditable 属性。--> <p dropzone="copy">方正大师</p><!--拖动数据会产生被拖动数据的副本。--> <p dropzone="link">方正大师</p><!--拖动数据会产生指向原始数据的链接。--> <p dropzone="move">方正大师</p><!--拖动数据会导致被拖动数据被移动到新位置。--> <p hidden="hidden">冲虚道长</p> <p hidden="false">冲虚道长</p> <p hidden="true">冲虚道长</p> </body>
<title>无标题文档</title> <script type="text/javascript"> function change_header() { document.getElementById("suibian").innerHTML="Nice day!"; } </script> </head> <body> <h1 id="suibian">你好啊</h1> <button onclick="change_header()">改变文章</button> </body> </html>
<body> <!--注释：lang 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>--> <!--规定元素内容的语言。--> <p lang="cs">这人</p><!--所有浏览器均支持 lang 属性。--> <p lang="af">这人</p> <p lang="ar">这人</p> <p lang="be">这人</p> <p lang="bg">这人</p> <p lang="ca">这人</p> <p lang="cs">这人</p> <p lang="da">这人</p> <p lang="de">这人</p> <p lang="el">这人</p> <!--spellcheck=true/false：对不对元素进行拼写和语法检查---> </body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <body> <p>data-* 用于存储页面或应用程序的私有定制数据。</p> <p> data-* 属性用于存储页面或应用程序的私有自定义数据。</p> <p> data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。</p> <p> data-* 属性包括两部分： 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串</p> <p> 注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 data-* 属性是 HTML5 中的新属性。</p> <p>下面是用法</p> <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <body> <p>contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。</p> <div contextmenu="mymenu"> <menu type="context" id="mymenu"> <menuitem label="Refresh"> </menuitem> <menuitem label="Twitter"> </menuitem></menu> </div> <p>contextmenu 属性规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单。 contextmenu 属性的值是要打开的 menu 元素的 id。</p> </body> </html>
<body> <!--style属性样式--> <!--一个或多个由分号分隔的 CSS 属性和值。--> <h1 style="color:blue; text-align:center">为了新中国的胜利前进</h1> <p style="color:red;">岳林山的</p> <!--tabindex 属性,是tab键的顺序--> <!--以下元素支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。--> <button tabindex="1">第一个</button> <button tabindex="2">第二个</button> <button tabindex="3">第三个</button> <!--title是额外显示--> <a href="http://www.cctv.com" title="这是令狐冲的">按钮</a> <!--title是abbr和acronym的必须元素--> <abbr title="这也是令狐冲的">按钮</abbr> <acronym title="这是岳灵珊的" >按钮</acronym> <!--translate 属性:translate="yes|no"是否翻译元素的内容--> </body>
Window 事件属性，最常用在body中
接下来的触发事件都用到了body中
<title>无标题文档</title> <script type="text/javascript"> function prin() { alert("此文档正在打印");} </script> </head> <body onafterprint="prin()"><!--onafterprint文档打印之后运行的脚本。--> <h1>请试着打印此文档。</h1> <p><b>提示：</b>键盘快捷键，比如 Ctrl+P 设置页面打印。</p> <p><b>注释：</b>Internet Explorer 和 Firefox 支持 onafterprint 属性。</p> <p><b>注释：</b>在 IE 中，onafterprint 属性在打印对话框出现之前而不是之后发生。</p> </body> </html>
<script> function prin() { alert("此文档正在打印");} </script> </head> <body onbeforeprint="prin()"><!--onbeforeprint 文档打印之前运行的脚本。 常和onafterprint事件一同使用--> <h1>请试着打印此文档。</h1> <p><b>提示：</b>键盘快捷键，比如 Ctrl+P 设置页面打印。</p> <p><b>注释：</b>Internet Explorer 和 Firefox 支持 onbeforeprint 属性。</p> </body>
<title>无标题文档</title> <script> function loaad() { alert("此文档正在打印");} </script> </head> <body onload="loaad()"><!--onload 页面结束加载之后触发。--> <h1>飒飒</h1> </body> </html>
<title>无标题文档</title> <script> function prin() { alert("您已经改变窗口大小");} </script> </head> <body onresize="prin()"> <!--onresize,调整窗口大小时候发生--> <p>请试着调整浏览器窗口的大小。</p> </body> </html>
<title>无标题文档</title> <script type="text/javascript"> function prin() { alert("感谢您的访问");} </script> <script type="text/javascript"> <body onunload="prin()"> <!--onunload一旦页面已下载时触发（或者浏览器窗口已被关闭）--> <!--在用户从页面导航离开时发生（通过点击链接、提交表单或者关闭浏览器窗口等等--> <h1>欢迎访问我的首页</h1> <p>请关闭窗口，或按 F5 刷新页面。</p> </body> </html>
其他的window事件属性
|
属性 |
值 |
描述 |
|
onerror |
script |
在错误发生时运行的脚本。 |
|
onhaschange |
script |
当文档已改变时运行的脚本。 |
|
onmessage |
script |
在消息被触发时运行的脚本。 |
|
onoffline |
script |
当文档离线时运行的脚本。 |
|
ononline |
script |
当文档上线时运行的脚本。 |
|
onpagehide |
script |
当窗口隐藏时运行的脚本。 |
|
onpageshow |
script |
当窗口成为可见时运行的脚本。 |
|
onpopstate |
script |
当窗口历史记录改变时运行的脚本。 |
|
onredo |
script |
当文档执行撤销（redo）时运行的脚本。 |
|
onstorage |
script |
在 Web Storage 区域更新后运行的脚本。 |
|
onundo |
script |
在文档执行 undo 时运行的脚本。 |
Form 事件
由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：
<title>无标题文档</title> <script type="text/javascript"> function upperCase() { var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } </script> <body> <!--onblur script 元素失去焦点时运行的脚本。--> <p>请输入您的姓名，然后把焦点移动到字段外：</p> 请输入您的姓名（英文字符）： <input type="text" name="fname" id="fname" onblur="upperCase()"> </body> </html>
<title>无标题文档</title> <script type="text/javascript"> function checkField(val) { alert("输入值已更改。新值是：" + val); } </script> <body> <!--onchange 在元素值改变时触发。 onchange 属性适用于：<input>、<textarea> 以及 <select> 元素。--> <p>请修改输入字段中的文本，然后在字段外点击以触发 onchange。</p> <p>原来的值是hello</p> 请输入文本： <input type="text" name="txt" value="Hello" onchange="checkField(this.value)"> </body> </html>
<title>无标题文档</title> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow"; } </script> <body> <!--onfocus 属性在元素获得焦点时触发。 onfocus 常用于 <input>、<select> 以及 <a>. 提示：onfocus 属性与 onblur 属性相反。 注释：onfocus 属性不适用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p> First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br> Last name: <input type="text" id="lname" onfocus="setStyle(this.id)"> </body>
<title>无标题文档</title> <script type="text/javascript"> function showMsg() { alert("您选中了一些文本！"); } </script> <body> <!--onselect 属性在元素中的文本被选中时触发。 onselect 属性可用于以下元素内：<input type="file">、<input type="password">、<input type="text">、<keygen> 以及 <textarea>--> 一些文本：<input type="text" value="请选中我！" onselect="showMsg()"> <p>函数 showMsg() 在输入字段中的文本被选中时触发。此函数显示一段消息。</p> </body> </html>
<title>无标题文档</title> <script type="text/javascript"> function checkForm() { alert("表单已提交！"); } </script> <body> <!--onsubmit 属性在提交表单时触发。 onsubmit 属性只在 <form> 中使用。--> <form action="qwd-1.html" onsubmit="checkForm()"> 姓：<input type="text" name="lname"><br> 名：<input type="text" name="fname"><br> <input type="submit" value="提交"> </form> <p>函数 checkForm() 在提交按钮被点击时触发。此函数向用户显示一段消息。</p> </body> </html>
|
属性 |
值 |
描述 |
|
oncontextmenu |
script |
当上下文菜单被触发时运行的脚本。 |
|
onformchange |
script |
在表单改变时运行的脚本。 |
|
onforminput |
script |
当表单获得用户输入时运行的脚本。 |
|
oninput |
script |
当元素获得用户输入时运行的脚本。 |
|
oninvalid |
script |
当元素无效时运行的脚本。 |
|
onreset |
script |
当表单中的重置按钮被点击时触发。HTML5 中不支持。 |
Keyboard 事件
|
属性 |
值 |
描述 |
|
script |
在用户按下按键时触发。 |
|
|
script |
在用户敲击按钮时触发。 |
|
|
script |
当用户释放按键时触发。 |
<title>无标题文档</title> <script type="text/javascript"> function displayResult() { var x; if(window.event) // IE8 以及更早版本 { x=event.keyCode; } else if(event.which) // IE9/Firefox/Chrome/Opera/Safari { x=event.which; } var keychar=String.fromCharCode(x); alert("按键 " + keychar + " 被按下"); } </script> <body> <p> onkeydown 属性在用户（在键盘上）按键时触发。<p> <h3> 提示：相对于 onkeydown 事件的事件次序： onkeydown onkeypress onkeyup</h3> <!--注释：onkeydown 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p>当用户在输入字段中按下按键时触发函数。此函数提示用户已按按键。</p> <input type="text" onkeydown="displayResult()"> </body> </html>
<title>无标题文档</title> <script type="text/javascript"> function displayResult() { var x; if(window.event) // IE8 以及更早版本 { x=event.keyCode; } else if(event.which) // IE9/Firefox/Chrome/Opera/Safari { x=event.which; } keychar=String.fromCharCode(x); alert("按键 " + keychar + " 被按下"); } </script> <body> <p> onkeydown 属性在用户（在键盘上）按键时触发。<p> <h3> 提示：相对于 onkeydown 事件的事件次序： onkeydown onkeypress onkeyup</h3> <!--注释：在任何浏览器中，onkeypress 事件不会被所有按键触发（例如 ALT、CTRL、SHIFT、ESC）。 注释：onkeypress 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p>当用户在输入字段中按下按键时触发函数。此函数提示用户已按按键。</p> <input type="text" onkeypress="displayResult()"> </body> </html>
<title>无标题文档</title> <script type="text/javascript"> function displayResult() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> <body> <p> onkeyup 属性在用户（在键盘上）释放按键时触发。<p> <!--注释：onkeyup 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>--> <p>当用户在输入字段中按下按键时触发函数。此函数把字符转换为大写。</p> 请输入您的姓名（英文字符）： <input type="text" id="fname" onkeyup="displayResult()"> </body> </html>
Mouse 事件
由鼠标或类似用户动作触发的事件：
1：onclick 元素上发生鼠标点击时触发。
<title>无标题文档</title> <script type="text/javascript"> function copyText() { document.getElementById("field2").value=document.getElementById("field1").value; } </script> <body> <p> Field1: <input type="text" id="field1" value="Hello World!"><br> Field2: <input type="text" id="field2"><br><br> <button onclick="copyText()">复制文本</button> <p>当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p> </body> </html>
2:ondblclick 元素上发生鼠标双击时触发。
<title>无标题文档</title> <script type="text/javascript"> function copyText() { document.getElementById("field2").value=document.getElementById("field1").value; } </script> </script> <body> <!--ondblclick 属性在鼠标双击元素时触发。 注释：ondblclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。 --> Field1: <input type="text" id="field1" value="Hello World!"><br> Field2: <input type="text" id="field2"><br><br> <button ondblclick="copyText()">复制文本</button> <p>当按钮被双击时触发函数。此函数把文本从 Field1 复制到 Field2 中。</p> </body> </html>
3:onmousedown 当元素上按下鼠标按钮时触发。
onmouseup 当在元素上释放鼠标按钮时触发。
<title>无标题文档</title> <script type="text/javascript"> function mouseDown() { document.getElementById("p1").style.color="red"; } function mouseUp() { document.getElementById("p1").style.color="green"; } </script> <body> <p>onmousedown 属性在鼠标按钮在元素上按下时触发。</p> <p> 提示：相对于 onmousedown 事件,onmouseup 事件的事件次序（限于鼠标左/中键）： onmousedown onmouseup onclick</p> <p> 相对于 onmousedown 事件,onmouseup 事件的事件次序（限于鼠标右键）： onmousedown onmouseup oncontextmenu</p> <!-- 注释：onmousedown 属性,onmouseup 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> 请点击文本！mouseDown() 函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。 </p> </body> </html>
4: onmousemove 当鼠标指针移动到元素上时触发。
onmouseout 当鼠标指针移出元素时触发。
<title>无标题文档</title> <script type="text/javascript"> function bigImg(x) { x.style.height="180px"; x.style.width="180px"; } function normalImg(x) { x.style.height="128px"; x.style.width="128px"; } </script> <body> <h2>onmousemove 属性在鼠标指针移动到元素上时触发。</h2> <!-- 注释：onmousemove 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。--> <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../Pictures/1.JPG" width="128" height="128" alt="Smiley" > <p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p> <p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p> </body> </html>
5:onmousemove 当鼠标指针在元素上移动时触发。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function bigImg(x) { x.style.height="180px"; x.style.width="180px"; } function normalImg(x) { x.style.height="128px"; x.style.width="128px"; } </script> <body> <!--注释：onmouse,ove/onmouseout 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title> --> <img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="../Pictures/1.JPG" width="100" height="100" alt="Smiley" > <p>函数 bigImg() 在鼠标指针移动到图像上时触发。此函数放大图像。</p> <p>函数 normalImg() 在鼠标指针移出图像时触发。此函数把图像的高度和宽度重置为正常尺寸。</p> </body> </html>
|
ondrag |
script |
元素被拖动时运行的脚本。 |
|
ondragend |
script |
在拖动操作末端运行的脚本。 |
|
ondragenter |
script |
当元素元素已被拖动到有效拖放区域时运行的脚本。 |
|
ondragleave |
script |
当元素离开有效拖放目标时运行的脚本。 |
|
ondragover |
script |
当元素在有效拖放目标上正在被拖动时运行的脚本。 |
|
ondragstart |
script |
在拖动操作开端运行的脚本。 |
|
ondrop |
script |
当被拖元素正在被拖放时运行的脚本。 |
|
onmousewheel |
script |
当鼠标滚轮正在被滚动时运行的脚本。 |
|
onscroll |
script |
当元素滚动条被滚动时运行的脚本。 |
Media 事件
由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:
|
属性 |
值 |
描述 |
|
onabort |
script |
在退出时运行的脚本。 |
|
oncanplay |
script |
当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。 |
|
oncanplaythrough |
script |
当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 |
|
ondurationchange |
script |
当媒介长度改变时运行的脚本。 |
|
onemptied |
script |
当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 |
|
onended |
script |
当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 |
|
onerror |
script |
当在文件加载期间发生错误时运行的脚本。 |
|
onloadeddata |
script |
当媒介数据已加载时运行的脚本。 |
|
onloadedmetadata |
script |
当元数据（比如分辨率和时长）被加载时运行的脚本。 |
|
onloadstart |
script |
在文件开始加载且未实际加载任何数据前运行的脚本。 |
|
onpause |
script |
当媒介被用户或程序暂停时运行的脚本。 |
|
onplay |
script |
当媒介已就绪可以开始播放时运行的脚本。 |
|
onplaying |
script |
当媒介已开始播放时运行的脚本。 |
|
onprogress |
script |
当浏览器正在获取媒介数据时运行的脚本。 |
|
onratechange |
script |
每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 |
|
onreadystatechange |
script |
每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 |
|
onseeked |
script |
当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 |
|
onseeking |
script |
当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 |
|
onstalled |
script |
在浏览器不论何种原因未能取回媒介数据时运行的脚本。 |
|
onsuspend |
script |
在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 |
|
ontimeupdate |
script |
当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 |
|
onvolumechange |
script |
每当音量改变时（包括将音量设置为静音）时运行的脚本。 |
|
onwaiting |
script |
当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本 |
