JavaScript学习心得（七）

一 创建事件监听器

　　开发人员往往使用事件和元素组合来命名事件处理函数。

　　创建事件监听器方法:

• 嵌入式事件处理器即将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。