JavaScript中事件处理详解

常见的事件有：

• 用户点击页面上的某个内容
• 鼠标经过特定的元素 
• 用户按下键盘上的某个按键 
• 用户滚动窗口或改变窗口大小
• 页面元素加载完成

事件处理

1.HTML事件处理:

直接添加到HTML结构中 (*不推荐使用，考虑到结构分离）

2.DOM0级事件处理:

    把一个函数赋值给一个事件处理程序属性 (事件绑定，优点:使用方便简单；缺点：只能绑定一个事件处理函数，无法执行多个任务） 
    解除绑定：将点击事件赋值为空；btn.onclick=null;

3.DOM2级事件处理:

    addEventListener(“事件名”,”事件处理函数”,”布尔值”); (事件名不用带on）
    true:事件捕获  false:事件冒泡 ;默认为false;
    优点：可以为元素相同事件绑定多个事件处理函数
    
    低版本IE 不支持 IE9开始支持
    解除绑定：使用removeEventListener，
    btn.removeEventListener('click', arguments.callee);
            arguments.callee指向当前函数

4.IE事件处理程序(IE版本小于等于8)

        attachEvent(“事件名”,”事件处理函数”)
        绑定的事件名带 on；
        解除绑定：detachEvent();
        btn.detachEvent('onclick', arguments.callee);

5.事件处理兼容性

     创建一个函数      
    /**
    * 事件绑定
    * @param {string} type 事件类型
    * @param {object} elm 元素对象
    * @param {function} callback 事件处理函数
    */
        function addEvent(type, elm, callback) {
                if (elm.addEventListener) {
                elm.addEventListener(type, callback);
                }    else if (elm.attachEvent) {
                elm.attachEvent('on' + type, callback);
                }     else {
                elm['on' + type] = callback;
                }
        }

6.事件处理周期（事件流）

• 第一阶段：事件的捕获，事件对象沿DOM树向下传播 
• 第二阶段：目标触发，运行事件监听函数 
• 第三阶段：事件冒泡，事件沿DOM树向上传播 
• 注：IE的事件中没有“捕获”阶段

7.阻止事件冒泡

    event.stopPropagation( )//DOM标准；
    event.cancelBubble(  )//IE
    
         if (ev.stopPropagation) {
        ev.stopPropagation(); //DOM标准 阻止事件冒泡
        } else {
        ev.cancelBubble = true; //ie 阻止事件冒泡
        }

8.事件委托

事件是默认冒泡的，所以我们点击按钮的时候事件传递给了box，触发了box的事件监听函数
event.target 目标对象 谁触发的这个事件
事件委托指的是将事件目标需要执行的函数给予到祖先级元素
事件委托的好处 减少事件绑定的次数 提高执行效率

9 滚动事件兼容

    1. ie chrome
    .ev.wheelDelta 滚轮方向
    . 正数是上 负数是下
    .console.log(ev.wheelDelta); //120 ,-120
    2. firefox
    . ev.detail 滚轮方向
    . 正数是下 负数是上
     console.log(ev.detail);
     约定一个布尔值 向上true 向下是false

function fn(ev) {
var flag = true;
if (ev.wheelDelta) {
flag = ev.wheelDelta > 0 ? true : false;
} else {
flag = ev.detail < 0 ? true : false;
}
return flag;
}

10.阻止事件默认行为

        if (ev.preventDefault) {
           ev.preventDefault();//DOM标准
        }  else {
          ev.returnValue = false;//IE兼容写法
        }
/*另外，在事件处理函数中写  return false；也可以阻止默认行为，但是对某些行为没有效果。
例如a标签的默认跳转行为。*/

11.事件列举

1.鼠标事件

mousedown //鼠标按下
mouseup //鼠标弹起
mousemove //鼠标移动
click //左键点击
contextmenu//右键点击
dblclick //左键双击
mouseover //鼠标经过
mouseout //鼠标离开
mouseenter //鼠标进入
mouseleave //鼠标离开
mousewheel //chrome ie 中键滚轮
DOMMouseScroll //FireFox 中键滚轮

2.窗口事件

load //加载完毕
resize //缩放
scroll //滚动条
hashchange //锚点改变

扩展：就绪事件
DOMContentLoaded 当DOM结构加载完毕后执行 速度更快 来自HTML5

3. 键盘事件

   keypress //键盘持续按下
   keydown //键盘按下
   keyup //键盘弹起
   键盘事件一般绑定给document
       kerboaderEvent:键盘事件：
       (1)keyCode--ASCII码：键码，存在兼容问题
           code = ev.keyCode || ev.which
       (2) key  event.key指向点击键盘显示数字
       (3)判断组合键  
       if (ev.ctrlKey) {
           console.log('您按下了ctrl+' + ev.key);
           } 
           else if (ev.altKey) {
           console.log('您按下了alt+' + ev.key);
           } 
           else if (ev.shiftKey) {
           console.log('您按下了shift+' + ev.key);
           }

4. 表单事件

 focus //获得焦点
 blur //失去焦点
 change //改变   触发需要1.内容改变  2.失去焦点
 submit //提交