Event 对象之事件句柄　(Event Handlers)

谓的Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！
事件句柄

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。

属性此事件发生在何时...IEFOW3Conabort图像的加载被中断。419Yesonblur元素失去焦点。319Yesonchange域的内容被改变。319Yesonclick当用户点击某个对象时调用的事件句柄。319Yesondblclick当用户双击某个对象时调用的事件句柄。419Yesonerror在加载文档或图像时发生错误。419Yesonfocus元素获得焦点。319Yesonkeydown某个键盘按键被按下。31NoYesonkeypress某个键盘按键被按下并松开。319Yesonkeyup某个键盘按键被松开。319Yesonload一张页面或一幅图像完成加载。319Yesonmousedown鼠标按钮被按下。419Yesonmousemove鼠标被移动。319Yesonmouseout鼠标从某元素移开。419Yesonmouseover鼠标移到某元素之上。319Yesonmouseup鼠标按键被松开。419Yesonreset重置按钮被点击。419Yesonresize窗口或框架被重新调整大小。419Yesonselect文本被选中。319Yesonsubmit确认按钮被点击。319Yesonunload用户退出页面。319Yes

下面就各个事件分别介绍

1、onabort 事件

定义和用法
onabort 事件会在图像加载被中断时发生。

当用户在图像完成载入之前放弃图像的装载（如单击了 stop 按钮）时，就会调用该句柄。

支持该事件的 HTML 标签：

<img>

支持该事件的 JavaScript 对象：

image

实例 1

在本例中，如果图像的加载被中断，则会显示一个对话框：

<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')" />

<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')" />

实例 2

在本例中，如果图像的加载中断，我们将调用一个函数：<html>
<head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="image_w3default.gif" onabort="abortImage()" />
</body>
</html>

2、onblur 事件
返回 Event 对象参考手册
定义和用法
onblur 事件会在对象失去焦点时发生。

语法
onblur="SomeJavaScriptCode"参数描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>,
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window
实例 1
在本例中，我们将在用户离开输入框时执行 JavaScript 代码：

<html>
<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>

<body>

输入您的姓名：
<input type="text" id="fname" onblur="upperCase()" />

</body>
</html>

3、onchange 事件
返回 Event 对象参考手册
定义和用法
onchange 事件会在域的内容改变时发生。

语法
onchange="SomeJavaScriptCode"参数描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：
<input type="text">, <select>, <textarea>支持该事件的 JavaScript 对象：
fileUpload, select, text, textarea实例 1
在本例中，我们将在用户改变输入域内容时执行 JavaScript 代码：

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>

<body>

输入您的姓名：
<input type="text" id="fname" onchange="upperCase(this.id)" />

管用什么编辑器，基本都有这个emmet插件了。会用了，用的多了还是很省力。

基本语法

子级：>

nav>ul>li
<nav>
 <ul>
 <li></li>
 </ul>
</nav>

同级：+

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

向上爬一层，下方生成：^

div+div>p>span+em^bq
<div></div>
<div>
 <p><span></span><em></em></p>
 <blockquote></blockquote>
</div>

有几个^，可以向外爬几层。当然爬到body就爬不动了。

组：（）

先算乘除后算加减，括号内的要先算，一个道理

(div>dl>(dt+dd)*3)+footer>p
<div>
 <dl>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
 <dt></dt>
 <dd></dd>
 </dl>
</div>
<footer>
 <p></p>
</footer>

相乘：*

ul>li*5
<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
乘多少生成多少

累加：$

相当于js中for循环变量i.

ul>li.item$*5
<ul>
 <li class="item1"></li>
 <li class="item2"></li>
 <li class="item3"></li>
 <li class="item4"></li>
 <li class="item5"></li>
</ul>

id和class快捷命名

#header
<div id="header"></div>
.title
<div class="title"></div>
form#search.wide
<form id="search" class="wide"></form>
p.class1.class2.class3
<p class="class1 class2 class3"></p>

自定义属性

p[title="Hello world"]
<p title="Hello world"></p>
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
[a='value1' b="value2"]
<div a="value1" b="value2"></div>

文本

a{Click me}
<a href="">Click me</a>
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>

一些默认用法

.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul>
 <li class="class"></li>
</ul>
table>.row>.col
<table>
 <tr class="row">
 <td class="col"></td>
 </tr>
</table>

html用法

基本是加tab键自动闭合的用法。

！自动生成html5规范文档

a <a href=""></a>

a:link <a href="http://"></a>

a:mail <a href="mailto:"></a>

abbr <abbr title=""></abbr>(鼠标移动悬浮title标签)

acronym, acr <acronym title=""></acronym>(理解可同abbr)

base <base href="" />(所有链接规定默认的地址)

basefont <basefont />（写到head内，默认颜色和字号）

br <br />

frame <frame />

hr <hr />

bdo <bdo dir=""></bdo>（可覆盖文本方向）

bdo:r <bdo dir="rtl"></bdo>

bdo:l <bdo dir="ltr"></bdo>

col <col />

link <link rel="stylesheet" href="" />

link:css <link rel="stylesheet" href="style.css" />

link:print <link rel="stylesheet" href="print.css" media="print" />

link:favicon <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch <link rel="apple-touch-icon" href="favicon.png" />

link:rss <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

link:import, link:im<link rel="import" href="component.html" />

meta <meta />

meta:utf <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat <meta http-equiv="X-UA-Compatible" content="IE=7" />

style <style></style>

script <script></script>

script:src <script src=""></script>

img <img src="" alt="" />

img:srcset, img:s <img srcset="" src="" alt="" />

img:sizes, img:z <img sizes="" srcset="" src="" alt="" />

picture <picture></picture>

source, src <source />

source:src, src:sc <source src="" type="" />

source:srcset, src:s <source srcset="" />

iframe <iframe src="" frameborder="0"></iframe>

embed <embed src="" type="" />

object <object data="" type=""></object>

param <param name="" value="" />

map <map name=""></map>

area <area shape="" coords="" href="" alt="" />

area后可以加d,c,r,p来生成不同的形状

form <form action=""></form>

form:get <form action="" method="get"></form>

form:post <form action="" method="post"></form>

label <label for=""></label>

input <input type="text" />

inp <input type="text" name="" id="" />

input:hidden, input:h <input type="hidden" name="" />

input:text, input:t <input type="text" name="" id="" />

input:search <input type="search" name="" id="" />

input基本是什么加类型就可以生成，如input:time,password，后面就不再列举

select <select name="" id=""></select>

select:disabled, select:d <select name="" id="" disabled="disabled"></select>

option, opt <option value=""></option>

textarea <textarea name="" id="" cols="30" rows="10"></textarea>

marquee <marquee behavior="" direction=""></marquee>

menu:context, menu:c <menu type="context"></menu>

menu:toolbar, menu:t <menu type="toolbar"></menu>

video <video src=""></video>

audio <audio src=""></audio>

html:xml <html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen <keygen />

command <command />

button:submit, btn:s <button type="submit"></button>

button:reset, btn:r <button type="reset"></button>

button:disabled, btn:d <button disabled="disabled"></button>

fieldset:disabled, fst:d <fieldset disabled="disabled"></fieldset>

bq <blockquote></blockquote>

fig <figure></figure>

figc <figcaption></figcaption>

pic <picture></picture>

ifr <iframe src="" frameborder="0"></iframe>

emb <embed src="" type="" />

obj <object data="" type=""></object>

cap <caption></caption>

colg <colgroup></colgroup>

fst, fset <fieldset></fieldset>

btn <button></button>

optg <optgroup></optgroup>

tarea <textarea name="" id="" cols="30" rows="10"></textarea>

leg <legend></legend>

sect <section></section>

art <article></article>

hdr <header></header>

ftr <footer></footer>

adr <address></address>

dlg <dialog></dialog>

str <strong></strong>

prog <progress></progress>

mn <main></main>

tem <template></template>

datag <datagrid></datagrid>

datal <datalist></datalist>

kg <keygen />

out <output></output>

det <details></details>

cmd<command />

doc

<html>
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>
</body>
</html>

doc4

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

ri:dpr, ri:d<img srcset="" src="" alt="" />

ri:viewport, ri:v<img sizes="" srcset="" src="" alt="" />

ri:art, ri:a

<picture>
 <source media="(min-width: )" srcset="" />
 <img src="" alt="" />
</picture>

ri:type, ri:t

<picture>
 <source srcset="" type="image/" />
 <img src="" alt="" />
</picture>

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:xt

<!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" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

html:5

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
</head>
<body>
 
</body>
</html>

ol+

<ol>
 <li></li>
</ol>

ul+

<ul>
 <li></li>
</ul>

dl+

<dl>
 <dt></dt>
 <dd></dd>
</dl>

map+

<map name="">
 <area shape="" coords="" href="" alt="" />
</map>

table+

<table>
 <tr>
 <td></td>
 </tr>
</table>

colgroup+, colg+

<colgroup>
 <col />
</colgroup>

tr+

<tr>
 <td></td>
</tr>

select+

<select name="" id="">
 <option value=""></option>
</select>

optgroup+, optg+

<optgroup>
 <option value=""></option>
</optgroup>

pic+

<picture>
 <source srcset="" />
 <img src="" alt="" />
</picture>

!!!

<!DOCTYPE html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- ${child} -->

cc:ie6

<!--[if lte IE 6]>
 ${child}
<![endif]-->

cc:ie

<!--[if IE]>
 ${child}
<![endif]-->

cc:noie

<!--[if !IE]><!-->
 ${child}
<!--<![endif]-->

其他

除了基本语法和html,emment还提供了css及xsl的使用。

用法也是简写+tab,有兴趣可以参考官方的文档

docs.emmet.io/cheat-sheet

一行代码搭建页面框架

div#header>ul.nav>li*5^^^div#content>h1>a^^^div#footer

一章 HTML5概述

1.1、什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

1.2、什么是HTML5

HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。

1.3、本文重要说明

由于HTML5只是在HTML的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起，HTML一般用于描述网页的结构，所以一些样式和脚本方面的标签和属性以及关于JavaScript部分的特性也不再提及，重点在于梳理常用标签体系。

1.4、浏览器的版本

现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持HTML5上采取了措施。

（1）IE浏览器

2010年3月16日，微软MIX10技术大会上宣布其推出的IE9浏览器已经支持HTML5。同时还声称，随后将会更多的支持HTML新标准和CSS3新特性。

（2）FireFox浏览器

2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版，该版本中Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多的HTML5语法分析器，以及支持更多的HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频，在线音频在内的多种应用都已经在版本中实现。

（3）Google浏览器

2010年2月19日，谷歌Gears项目经理通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用用于HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此只要谷歌不断以加强网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出吊证的重要原因。

（4）Safari浏览器

2010年6月7日，苹果在开发者发布会公布Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。

（5）Opera浏览器

2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3，将会是全球互联网发展的未来趋势，包括目前Opera在内的诸多浏览器厂商，纷纷研发HTML5的相关产品，web未来属于HTML5。

综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。

1.5、选择开发工具

●Notepad++

官方地址：点击打开
是否免费：免费

●Visual Studio Code

官方地址：点击打开
是否免费：免费

●HBuilderX

官方地址：点击打开
是否免费：免费

●Dreamweaver

官方地址：点击打开
是否免费：收费

●Sublime Text

官方地址：点击打开
是否免费：收费

●Webstorm

官方地址：点击打开
是否免费：收费

Webstorm为本文使用的工具，请自行购买激活，也可以使用以上的免费工具，安装步骤都较为简单，在此省略！

第二章 HTML5语法

2.1、基本结构

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

2.2、语法规范

HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)

2.3、标签规范

单标签：

<标签名 [属性名=属性值,...]>

成对标签：

<标签名 [属性名=属性值,...]></标签名>

第三章 HTML5标签

3.1、标题标签

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

3.2、段落标签

<p>这是一个段落</p>

3.3、链接标签

使用示例：

常见属性：

属

3.4、图像标签

3.5、表格标签

<tr>

</tr>

<tr>

</tr>

</table>

3.6、列表标签

无序列表：

<ul>

</ul>

有序列表：

<ol>

</ol>

自定义列表：

<dl>

</dl>

3.7、分组标签

3.8、语义标签

常见标签：

基本布局：

3.9、表单标签

常见标签：

案例演示：

1、form、input、label演示

<p>

</p>

<p>

</p>

</form>

2、textarea演示

</form>

3、fieldset、legend、select、optgroup、option演示

<legend>请选择你的爱好：</legend>

</optgroup>

</optgroup>

</select>

</fieldset>

</form>

4、datalist演示

</datalist>

</form>

5、单选框演示

<label for="female">female</label>

</form>

6、复选框演示

</form>

3.10、框架标签

3.11、音频标签

您的浏览器不支持 Audio 标签。

</audio>

3.12、视频标签

您的浏览器不支持 Video 标签。

</video>

3.13、其它标签

水平线：<hr>

换行：<br>

<code>计算机代码</code>

<pre>预格式化文本</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<abbr>缩写词或者首字母缩略词</abbr>

<blockquote>从另一个源引用的部分</blockquote>

<cite>工作的名称</cite>

<del>删除的文本</del>

<ins>插入的文本</ins>

3.14、头部标签

第四章 HTML5属性

4.1、属性概述

HTML标签可以设置属性，属性总是以名称/值对的形式出现，比如：name=“value”，它的主要作用是控制或修饰标签。

4.2、通用属性

第五章 HTML5事件

5.1、事件概述

HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

5.2、窗口事件

由窗口触发该事件 (同样适用于 <body> 标签)：

5.3、表单事件

表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：

5.4、键盘事件

通过键盘触发事件，类似用户的行为：

5.5、鼠标事件

通过鼠标触发事件，类似用户的行为：

5.6、媒体事件

通过视频（videos），图像（images）或音频（audio）触发该事件，多应用于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。

5.7、其它事件

课件资料▶腾讯文档

在线咨询

上一篇：Java 0基础入门（Html标签的使用）
下一篇：文本，Vue实现打印的方式，打印机的种类有多少，浏览器打印html

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Event 对象之事件句柄 (Event Handlers)

定义和用法onabort 事件会在图像加载被中断时发生。

支持该事件的 HTML 标签：

支持该事件的 JavaScript 对象：

实例 1

实例 2

基本语法

html用法

其他

一章 HTML5概述

1.1、什么是HTML

1.2、什么是HTML5

1.3、本文重要说明

1.4、浏览器的版本

1.5、选择开发工具

第二章 HTML5语法

2.1、基本结构

2.2、语法规范

2.3、标签规范

第三章 HTML5标签

3.1、标题标签

3.2、段落标签

3.3、链接标签

3.4、图像标签

3.5、表格标签

3.6、列表标签

3.7、分组标签

3.8、语义标签

3.9、表单标签

3.10、框架标签

3.11、音频标签

3.12、视频标签

3.13、其它标签

3.14、头部标签

第四章 HTML5属性

4.1、属性概述

4.2、通用属性

第五章 HTML5事件

5.1、事件概述

5.2、窗口事件

5.3、表单事件

5.4、键盘事件

5.5、鼠标事件

5.6、媒体事件

5.7、其它事件

您的项目需求

Event 对象之事件句柄　(Event Handlers)

定义和用法
onabort 事件会在图像加载被中断时发生。