【JavaScript】事件

一、前言

        继续上一章的内容，继续今天的Js学习。

 

二、内容

        事件处理程序

事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序

//HTML事件处理程序
例：
<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex){}">

缺点：
1.时差问题
2.扩展事件处理程序的作用域链在不同浏览器中会导致不同结果
3.HTML与JavaScript代码紧密耦合

//JavaScript事件处理程序
addEventListener()指定事件处理程序
removeEventListener()删除事件处理程序

三个参数：
1.要处理的事件名
2.作为事件处理程序的函数
3.一个布尔值 —— true是在捕获阶段（由外向内）调用；false是在冒泡阶段（由内向外）调用,通常使用false！

例：
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){alert(this.id);},false);

//如何使用removeEventListener()
var btn = document.getElementById("myBtn");
var handler = function(){alert(this.id);};

btn.addEventListener("click",handler,false);
......
btn.removeEventListener("click",handler,false);

         事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含所有与事件有关的信息。

例：
var btn = document.getElementById("myBtn");
btn.onclick = function(event){alert(event.type)};
//或
btn.addEventListener("click",function(event){alert(event.type);},false);

        事件类型

1.UI事件
  1.1 load —— 完全加载
  1.2 unload —— 完全卸载
  1.3 abort —— 停止下载过程中，嵌入的内容没有加载完
  1.4 error —— js错误
  1.5 select —— 选择文本框的一个或多个
  1.6 resize —— 窗口大小发生变化
  1.7 scroll —— 滚动条滚动 

2.焦点事件
  2.1 blur —— 元素失去焦点（不冒泡）
  2.2 focus —— 元素获得焦点（不冒泡）
  2.3 focusin —— 元素获得焦点（冒泡）
  2.4 focusout —— 元素失去焦点

3.鼠标事件
  3.1 click —— 单击事件
  3.2 dbclick —— 双击事件
  3.3 mousedown —— 按下鼠标任意按钮
  3.4 mouseenter —— 光标从元素外部首次移动到该元素范围之内
  3.5 mouseleave —— 在元素上方的光标移动到元素范围之外
  3.6 mousemove —— 鼠标指针在元素内部移动时重复触发
  3.7 mouseout —— 元素上方鼠标指针移入另一个元素
  3.8 mouseover —— 鼠标指针位于一个元素外部，用户首次移入另一个元素
  3.9 mouseup —— 释放鼠标按钮

4.滚轮事件
  4.1 mousewheel —— 鼠标滚轮事件

5.文本事件
  5.1 textInput —— 用户在可编辑区域中输入字符触发，用意是将文本显示给用户之前更容易拦截文本

6.键盘事件
  6.1 keydown —— 按下任意键，按住不放会重复触发
  6.2 keypress —— 按下字符键，按住不放会重复触发
  6.3 keyup —— 释放键盘键

7.合成事件 
8.变动事件

9.HTML5事件
  9.1 contextmenu —— 通过单击鼠标右键可以调出上下文菜单
  9.2 beforeunload —— 在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面
  9.3 DOMContentLoaded —— 形成完整的DOM树之后就会触发，不理会css,js资源是否下载完毕，用户可以尽早与页面交互
  9.4 pageshow 与 pagehide —— 该事件处理程序必须要添加到window对象
  9.5 hashchangde —— 在URL参数列表（#后的所有字符串）发送变化时通知，必须要添加到window对