第13章 事件

事件流

DOM2级事件流包括3个阶段：事件捕获阶段、处于目标阶段和冒泡阶段，依次发生。

事件处理程序

事件和事件处理程序的区别：

事件：指的是用户或者浏览器自身执行的某种动作，如click,load 事件处理程序：对应的响应这些事件函数叫之间处理程序，如onclick,onload 知道了事件和事件处理程序，那么依次看为事件指定处理程序的方式，共三种。

HTML事件处理程序

意思就是直接在HTML代码中绑定事件处理程序，一般情况HTML的每个元素都有一个与事件处理程序同名的HTML特性：如下

DOM0级绑定方法：

```

btn.onclick=function(){...}

<div style="border:5px outset green;padding:10px;">

    <strong>DOM2级事件处理程序</strong>
    <p>通过addEventListener()和removeEventListener()来实现。这两个函数分别接收
      3个参数，分别是绑定的事件类型，执行函数，冒泡或者捕获(默认为冒泡false)</p>
    <strong style="color:red;">注意：要想使得删除事件处理程序起作用，这两个函数第二个参数必须一样，哪怕代码一样都不行。</strong>

</div>

btn.addEventListener('click',function(){
console.log(this.value+"再次点击")
},false)
btn.removeEventListener('click',function () { //无效，无法删除click事件
console.log(this.value+"再次点击")
},false)

btn.addEventListener('click',handler,false)
btn.removeEventListener('click',handler,false) //有效，点击事件不起作用

<div style="border:5px outset green;padding:10px;">

    <strong>IE事件处理程序</strong>
    <p>IE是通过attachEvent()和detachEvent()，两个参数分别是事件处理程序名称与事件处理程序函数</p>


</div>

function addHandler(el,type,handler){
/**

• event：要添加的事件名称或者事件处理器的名称
• handler：事件处理程序
• type：事件冒泡或者事件捕获,默认为事件冒泡阶段
• 这个函数的主要功能是区分 DOM0级，DOM2级，IE浏览器
• 使用方法：
• addHandler(div,'click',handler)
  */
  if(el.addEventListener){
  el.addEventListener(type,handler,false)
  }else if(el.attachEvent){
  el.attachEvent("on"+type,handler)
  }else{
  el["on"+type]=handler
  }

}

function removeHandler(el,type,handler){
if(el.removeEventListener){
el.removeEventListener(type,handler,false)
}else if(el.detachEvent){
el.detachEvent("on"+type,handler)
}else{
el["on"+type]=null
}
}

# 三种处理程序的区别
<table>
  <tr>
    <td>事件处理程序</td>
    <td>添加事件处理程序</td>
    <td>删除事件处理程序</td>
    <td>备注</td>
  </tr>
  <tr>
    <td>HTML事件处理程序</td>
    <td>btn.onclick=function(){}</td>
    <td>btn.onclick=null</td>
    <td>一个事件只能绑定一个事件处理程序</td>
  </tr>
  <tr>
    <td>DOM2级事件处理程序</td>
    <td>btn.addEventListener('click',handler,false)</td>
    <td>btn.removeEventListener('click',handler,false)</td>
    <td>一个事件可以绑定多个事件处理程序，且从上到下依次执行</td>
  </tr>
  <tr>
    <td>IE事件处理程序</td>
    <td>btn.attachEvent('onclick',handler)</td>
    <td>btn.detachEvent('onclick',handler)</td>
    <td>一个事件可以绑定多个事件处理程序，执行顺序与写的顺序相反</td>
  </tr>
</table>

# 事件对象

- 鼠标滚轮事件
<table><td>鼠标进入时，碰到元素边界触发</td><td>鼠标进入元素</td> <td>鼠标在目标中移动</td><td>鼠标按下，不分左右键</td><td>鼠标释放</td> <td>鼠标点击左键</td><td>鼠标离开时，碰到边界元素触发</td><td>鼠标离开</td></tr><tr><td>mouseover</td><td>mouseenter</td><td>mousemove</td><td>mousedown</td><td>mouseup</td><td>click</td><td>mouseout</td><td>mouseleave</td></tr>
  <tr> </table>
- 几个位置
<table><tr><td>鼠标指针在视口中的水平垂直位置</td><td>鼠标指针在页面中的水平垂直位置</td><td>鼠标指针在屏幕坐标的位置</td><td>鼠标相对于目标元素边界的位置</td><td>鼠标滚动长度</td> </tr><tr><td>clientX,clientY</td><td>pageX,pageY</td><td>screenX，screenY</td><td>offsetX,offsetY</td><td>scrollTop,scrollLeft</td></tr></table>

# 键盘事件
- keydown
- keypress
- keyup

* keydown和keypress的区别：keydown是按下键盘上的任意键时触发，keypress是按下字母键触发。如果是按下字母键，先触发keydown，在触发keyup。