浏览器环境概述 JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。 本章开始介绍浏览器提供的各种 JavaScript 接口。首先，介绍 JavaScript 代码嵌入网页的方法。 代码嵌入网页的方法 网页中嵌入 JavaScript 代码，主要有四种方法。 <script>元素直接嵌入代码。 <script>标签加载外部脚本 事件属性 URL 协议 script 元素嵌入代码 <script>元素内部可以直接写入 JavaScript 代码。 1234<script> var x = 1 + 5; console.log(x);</script> <script>标签有一个type属性，用来指定脚本类型。对 JavaScript 脚本来说，type属性可以设为 ...

GlobalEventHandlers 接口 指定事件的回调函数，推荐使用的方法是元素的addEventListener方法。 1div.addEventListener('click', clickHandler, false); 除了之外，还有一种方法可以直接指定事件的回调函数。 1div.onclick = clickHandler; 这个接口是由GlobalEventHandlers接口提供的。它的优点是使用比较方便，缺点是只能为每个事件指定一个回调函数，并且无法指定事件触发的阶段（捕获阶段还是冒泡阶段）。 HTMLElement、Document和Window都继承了这个接口，也就是说，各种 HTML 元素、document对象、window对象上面都可以使用GlobalEventHandlers接口提供的属性。下面就列出这个接口提供的主要的事件属性。 GlobalEventHandlers.onabort 某个对象的abort事件（停止加载）发生时，就会调用onabort属性指定的回调函数。 各种元素的停止加载事件，到底如何触发，目前并没有统一的规定 ...

其他常见事件 资源事件 beforeunload 事件 beforeunload事件在窗口、文档、各种资源将要卸载前触发。它可以用来防止用户不小心卸载资源。 如果该事件对象的returnValue属性是一个非空字符串，那么浏览器就会弹出一个对话框，询问用户是否要卸载该资源。但是，用户指定的字符串可能无法显示，浏览器会展示预定义的字符串。如果用户点击“取消”按钮，资源就不会卸载。 123window.addEventListener('beforeunload', function (event) { event.returnValue = '你确定离开吗？';}); 上面代码中，用户如果关闭窗口，浏览器会弹出一个窗口，要求用户确认。 浏览器对这个事件的行为很不一致，有的浏览器调用event.preventDefault()，也会弹出对话框。IE 浏览器需要显式返回一个非空的字符串，才会弹出对话框。而且，大多数浏览器在对话框中不显示指定文本，只显示默认文本。因此，可以采用下面的写法，取得最大的兼容性。 123456windo ...

拖拉事件 拖拉事件的种类 拖拉（drag）指的是，用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。 拖拉的对象有好几种，包括元素节点、图片、链接、选中的文字等等。在网页中，除了元素节点默认不可以拖拉，其他（图片、链接、选中的文字）都可以直接拖拉。为了让元素节点可拖拉，可以将该节点的draggable属性设为true。 123<div draggable="true"> 此区域可拖拉</div> 上面代码的div区块，在网页中可以直接用鼠标拖动。松开鼠标键时，拖动效果就会消失，该区块依然在原来的位置。 draggable属性可用于任何元素节点，但是图片（<img>）和链接（<a>）不加这个属性，就可以拖拉。对于它们，用到这个属性的时候，往往是将其设为false，防止拖拉这两种元素。 注意，一旦某个元素节点的draggable属性设为true，就无法再用鼠标选中该节点内部的文字或子节点了。 当元素节点或选中的文本被拖拉时，就会持续触发拖拉事件，包括以下一些事件。 drag：拖拉过 ...

触摸事件 触摸操作概述 浏览器的触摸 API 由三个部分组成。 Touch：一个触摸点 TouchList：多个触摸点的集合 TouchEvent：触摸引发的事件实例 Touch接口的实例对象用来表示触摸点（一根手指或者一根触摸笔），包括位置、大小、形状、压力、目标元素等属性。有时，触摸动作由多个触摸点（多根手指）组成，多个触摸点的集合由TouchList接口的实例对象表示。TouchEvent接口的实例对象代表由触摸引发的事件，只有触摸屏才会引发这一类事件。 很多时候，触摸事件和鼠标事件同时触发，即使这个时候并没有用到鼠标。这是为了让那些只定义鼠标事件、没有定义触摸事件的代码，在触摸屏的情况下仍然能用。如果想避免这种情况，可以用event.preventDefault方法阻止发出鼠标事件。 Touch 接口 Touch 接口概述 Touch 接口代表单个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。 浏览器原生提供Touch构造函数，用来生成Touch实例。 1var touch = new Touch(touchOptions); Touch构造函数接受一个配置对象作为参 ...

表单事件 表单事件的种类 input 事件 input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。 input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。 input事件对象继承了InputEvent接口。 该事件跟change事件很像，不同之处在于input事件在元素的值发生变化后立即发生，而change在元素失去焦点时发生，而内容此时可能已经变化多次。也就是说，如果有连续变化，input事件会触发多次，而change事件只在失去焦点时触发一次。 下面是<select>元素的例子。 1234567891011121314/* HTML 代码如下<select id="mySelect&quo ...

进度事件 进度事件的种类 进度事件用来描述资源加载的进度，主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。 abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。 error：由于错误导致外部资源无法加载时触发。 load：外部资源加载成功时触发。 loadstart：外部资源开始加载时触发。 loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。 progress：外部资源加载过程中不断触发。 timeout：加载超时时触发。 注意，除了资源下载，文件上传也存在这些事件。 下面是一个例子。 1234567image.addEventListener('load', function (event) { image.classList.add('finished' ...

键盘事件 键盘事件的种类 键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口。 keydown：按下键盘时触发。 keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。 keyup：松开键盘时触发该事件。 如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下。 keydown keypress keydown keypress …（重复以上过程） keyup KeyboardEvent 接口概述 KeyboardEvent接口用来描述用户与键盘的互动。这个接口继承了Event接口，并且定义了自己的实例属性和实例方法。 浏览器原生提供KeyboardEvent构造函数，用来新建键盘事件的实例。 1new KeyboardEvent(type, options) KeyboardEvent构造函数接受两个参数。第一个参数是字符串，表示事件类型；第二个参数是一个事件配置对 ...

鼠标事件 鼠标事件的种类 鼠标事件主要有下面这些，所有事件都继承了MouseEvent接口（详见后文）。 （1）点击事件 鼠标点击相关的有四个事件。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同一个元素上双击鼠标时触发。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 click事件可以看成是两个事件组成的：用户在同一个位置先触发mousedown，再触发mouseup。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。 双击时，dblclick事件则会在mousedown、mouseup、click之后触发。 （2）移动事件 鼠标移动相关的有五个事件。 mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次。 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）。 mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这 ...