言

前言写点啥呢？实在不知道该说些什么。直接开始我们JavaScript系列的Event内容吧。

正文

一、什么是Event

JavaScript与HTML的交互是通过用户或浏览器操作页面时发生的事件（Event）来处理的。

当页面加载时，它被称为事件（Event）。当用户单击按钮时，单击也是一个事件（Event）。其他示例包括按任意键、关闭窗口、调整窗口大小等事件（Event）。

我们可以使用这些事件（Event）来执行JavaScript的响应，比如响应按钮、向用户显示消息、验证数据，等等。

事件（Event）是文档对象模型（DOM）级别3（原文：Document Object Model (DOM) Level 3）的一部分，每个HTML元素都包含一组可以触发JavaScript代码的事件（Event）。

接下来，我们通过几个来理解一番：

二、onclick事件

这是用户单击鼠标左键时最常用的事件类型。上demo：

三、onsubmit事件

onsubmit是我们进行form表单时的事件。

接下来让我们通过一个demo来了解如何使用onsubmit。在向Web服务器提交表单数据之前，我们将调用validate()。如果validate()返回true，则将提交表单，否则将不提交数据。

PS：这里涉及的都是一些伪码，此外涉及一些前后端交互的内容。由于篇幅原理，这里不会过多的涉及。

四、onmouseover和onmouseout事件

估计大家看名字就能猜到它们的作用吧？没错，当鼠标移到任何元素上时，onmouseover事件将触发；而当鼠标移出该元素时，onmouseout将触发。

上demo：

五、HTML 5标准Events

由于H5事件比较的，这里简单罗列几个，更多内容，大家有兴趣可以前往官网一看究竟。

1. Offline：document脱机时触发
2. onbeforeonload：在加载document之前触发
3. onblur：当窗口失去焦点时触发
4. oncanplaythrough：当媒体可以播放到末尾而不停止缓冲时触发

......

尾声

最近文章写的有点多，内容质量不知道还能不能入各位的法眼...歇一歇有些累。

avaScript 事件是由访问 Web 页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。

一． 事件介绍

事件一般是用于浏览器和用户操作进行交互。最早是 IE 和 Netscape Navigator 中出现 ，作为分担服务器端运算负载的一种手段。 直到几乎所有的浏览器都支持事件处理。 而 DOM2级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件。JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型。

二．内联模型

这种模型是最传统接单的一种处理事件的方法。 在内联模型中， 事件处理函数是 HTML标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的 ，并没有与 HTML 分离。

//在 HTML 中把事件处理函数作为属性执行 JS 代码

<input type="button" value="按钮" onclick="alert('Lee');" /> //注意单双引号

//在 HTML 中把事件处理函数作为属性执行 JS 函数

<input type="button" value="按钮" onclick="box();" /> //执行 JS 的函数

函数不得放到 window.onload 里面，这样就看不见了。

三． 脚本模型

由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题， 我

们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。

var input=document.getElementsByTagName('input')[0]; //得到 input 对象

input.onclick=function () { //匿名函数执行

alert('Lee');

};

TML中不同的属性支持略有区别。所谓的通用属性即全局属性，是所有元素都支持的一些属性，mdn里解释如下

全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。

我们可以在所有的HTML元素上指定全局属性，甚至是在标准里没有指定的元素。这意味着任何非标准元素仍必须能够应用这些属性，即使使用这些元素意味着文档不再是html5兼容的。例如，虽然<foo>不是一个有效的HTML元素，但是html5兼容的浏览器隐藏了标记为<foo hidden>...<foo>的内容。

除了基本的HTML全局属性之外，还存在以下全局属性:

• xml:lang 和 xml:base ——两者都是从XHTML规范继承，但为了兼容性而被保留的。
• 多重aria-*属性，用于改善可访问性。
• 事件处理程序属性：onabort, onautocomplete, onautocompleteerror, onblur, oncance, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.

H5保留的常用全局属性

• id：指定元素唯一标识。
• style：为元素指定样式。
• class：用于匹配css样式选择器。
• dir：指定文字内容方向。ltr、rtl
• title：指定元素额外信息，一般鼠标移上去会显示。
• lang：告诉浏览器或搜索引擎，标签内所使用的的语言。en ja ch
• accesskey：指定键盘按键，可使得元素快速获取焦点。
• tabindex：切换焦点顺序。

HTML新增的全局属性

• contentEditable：boolean是否可直接编辑html里的内容。HTMLElement接口提供了isContentEditable属性。
• hidden：boolean隐藏即相当于display:none.很有用！
• spellcheck：是否对用户输入的内容进行文本检查。
• autocapitalize：控制用户的文本输入是否和如何自动大写，它可以有以下的值：
• off or none，没有应用自动大写（所有字母都默认为小写字母）。
• on or sentences，每个句子的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
• words，每个单词的第一个字母默认为大写字母;所有其他字母都默认为小写字母。
• characters，所有的字母都应该默认为大写。
• contextmenu：右键菜单，暂无支持。
• data-*：一类自定义数据属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性和与脚本交换数据的能力，HTMLElement.dataset.* 可以访问读写它们。
• draggable：boolean指示是否可以 使用 H5新增的拖放API 拖动元素
• is：允许您指定标准HTML元素应该像已注册的自定义内置元素一样。框架和HTML组件会用到。