一 创建事件监听器
开发人员往往使用事件和元素组合来命名事件处理函数。
创建事件监听器方法:
- 嵌入式事件处理器即将JavaScript函数赋值给HTML元素属性(不推荐使用:污染HTML;无法应用渐进增强的概念)
- 传统事件处理:好处有二(容易使用和传统方法创建事件处理器可以使用匿名函数
window.onload = function(){
}),可以通过传统方法将对象的相应事件属性赋值为null,删除事件处理器,同样可以检查对象的属性来确认事件监听器的存在
if(typeof window.onload =='function'){}
;坏处也有二(只能指定一个事件处理器容易覆盖现有的事件处理器),可以通过创建一个调用两个所需函数的事件处理函数来缓解
- W3C事件处理,DOM Level2规范(嵌入和传统事件处理统称为DOM Level 0)之一,事件监听器用addEventListener()方法创建
window.addEventListener('load'(事件类型的名称,不是window自带的属性onload),init(调用的函数,不带括号),false(事件阶段的布尔值));
可以多次使用添加多个事件监听器,对应的是删除一个事件监听器removeEventListener(),必须提供与准备撤销的addEventListener()调用相同的参数。,当事件监听器不需要的时候建议删除。
- IE浏览器事件处理,用attachEvent()和detach()代替addEventListener()和removeEventListener(),只有两个参数:事件和事件发生时调用的函数
window.attachEvent('onload',init);
二 事件类型
1.输入设备事件
输入设备事件:光标驱动事件(不包括键盘)由鼠标、触控板、轨迹球、绘图板及类似设备触发。
1.1 输入按钮事件
click(单击)事件:
- mousedown(鼠标按下)
- mouseup(鼠标释放)
- click(单击)
在一个元素上单击并移动到另一个位置的操作叫做Drag(拖动)。
双击(dbclick)事件,如果在同一元素上使用dbclick,就不要使用click。
1.2输入移动事件
移动光标可能触发的事件:
- mouseout(鼠标移出)
- mouseover(鼠标移过)
- mousemove(鼠标移动):少用,降低网页性能
1.3键盘事件
- keydown(按下键)
- keyup(释放键)
- keypress(按键)
1.4浏览器事件
load:元素加载时触发
- unload:页面卸载时触发,常用于创建弹出式窗口的一种方法,但不能阻止用户关闭窗口
- resize:用户改变窗口大小时触发
- scroll:在浏览器窗口中滚动
- copy
- paste
- cut
1.5表单事件
- reset(无必要,当你使用重置按钮时,可以监视reset事件避免无意重置表单)
- change
- select:文本输入域和文本区域中的文本被选中时触发
- focus
- blur
三 高级事件处理
检查按键
键和字符的区别:键是指键盘上的物理按键,大部分键可以产生超过一个字符,关键至于Unicode。KeyCode和which属性获得字符的Unicode值,但IE不支持which,可以通过以下方法获得字符:
var charCode = e.which || e.keyCode;
//或者
var charCode = ( typeof e.which ==='number') ? e.which: e.keyCode;
使用String对象的fromCharCode()方法获得与字符代码相关的实际字符:
String.fromCharCode(charCode);
对于一些特定的情况(游戏或者其他图形界面),字符不重要,关键在于特定的光标键。
三个特殊键:shiftKey、ctrlkey、altKey。每个键的取值代表该键是否按下的布尔值。
阻止默认事件行为
阻止默认事件行为的方法——从事件处理器中返回false。