DOM--4 响应用户操作和事件（1）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

简介##

事件：事件并不是以”on”开头的。例如，onclick引用的是一个对象的属性，click才是事件。

事件侦听器：当指定的事件发生时会执行的函数或方法。

事件注册：为DOM元素的具体事件指定事件侦听器的过程。

调用：使用动词“invoke”来描述浏览器在检测到某种操作之后执行相应事件侦听器的情形。类似的术语还可能包括呼叫（called）、激发（fired）、执行（executed）或触发（triggered）等。

事件类型##

对象事件###

对象事件既适用于JavaScript对象（例如window对象），也适用于DOM对象（例如HTMLImageElement对象）

load(完成页面载入后调用，所有可能会因为图片加载而产生问题; 既适用于window对象，也适用于图像对象)
error; error事件既适用于window对象，也适用于图像对象

A.addEvent(window, 'load', function() {

  var image = document.createElement('IMG');

  A.addEvent(image, 'load', function() {

    document.body.appendChild(image);

  });

  A.addEvent(image, 'error', function() {

    var message = document.createTextNode('The image failed to load');

    document.body.appendChild(message);

  });

  image.setAttribute('src', 'http://www.hdwallpapersinn.com/wp-content/uploads/2014/08/little_cute_cat_1920x1080.jpg');

});

resize, 当调整浏览器窗口的大小而导致文档的视图发生改变时才会触发resize事件。
scroll, 适用于具有overflow:auto样式的元素，并且会在元素滚动期间连续地触发。

鼠标移动事件###

mouseover
mousemove
mouseout
mousedown; 左右点击都会触发
mouseup; 左健释放触发，如果先点击后移动到监听区域后释放，就只会触发mouseup;
click; 监听区域完成完整的左健点击释放才会触发；
dbclick

键盘事件###

keydown; 键盘按下后触发，该事件发生后会触发keypress事件；触发一次后会停顿一下，如果键盘还是按下状态，则会连续触发，keypress也是；
keyup; 键盘释放后触发；
keypress; 随着keydown事件触发；

表单相关事件###

submit: (注意监听是放在form元素上的)在表单中的button如果没有设置type='reset', 一般默认为submit;点击后触发submit事件; 默认会动态刷新，在处理函数中使用e.preventDefault()可以阻止；
reset： (注意监听是放在form元素上的)在表单中点击button设置为type='reset‘的按钮触发；
blur/focus: 适用于 <label>,<input>,<select>,<textarea>和<button> 等表单元素;一般情况下会在处理函数中处理一些判断并使用this.className来修改样式；
change: 适用于 <input>,<select>,<textarea> 表单元素；（所以注意如对input用直接设置value的情况下不会触发）
- 事件在元素激活状态如对 <input type="radio"> and <input type="checkbox">
- 元素失去焦点并值被改变且未提交时
- <select> 或 <input type="file"> 触发选择值或上传文件成功时

控制事件流和注册事件监听器##

事件流###

在有嵌套关系的元素中监听同一事件，则会产生事件流

DOM标准中相同的stopPropagation()方法也适用于捕获阶段，即自执行最外面的那个元素
DOM事件流中哪个事件可以被取消

事件	可取消
click	yes
mousedown	yes
mouseup	yes
mouseover	yes
mousemove	no
mouseout	yes
load	no
unload	no
abort	no
error	no
select	no
change	no
submit	yes
reset	no
focus	no
blur	no
resize	no
scroll	no