简介##
- 事件:事件并不是以”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 |
- 在一个相同阶段上对对象注册多个事件监听不能确保先后执行顺序,唯一的办法是在一个事件监听器上按顺序调用多个函数