Web前端事件

原创

何雪斌

修改于 2017-06-19 18:58:30

3.2K0

修改于 2017-06-19 18:58:30

文章被收录于专栏：何雪斌的专栏何雪斌的专栏

事件与事件流

事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。DOM是树形结构，若同时给父子结点绑定了相同的事件，那么他们的执行顺序是什么样子的呢？这就涉及到了事件流的概念。首先解释两个概念：

事件冒泡

IE的事件流叫事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点。

事件捕获

Netscape团队提出的另一种事件流叫事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

一个DOM事件分为三个阶段：捕获阶段、触发阶段、冒泡阶段。

事件捕获阶段为事件的触发奠定了基础，当DOM事件发生的时候，首先由最不具体的window结点向下捕获那个具象元素（触发事件的元素），事件捕获之后就开始执行绑定在上面的函数；当函数执行完毕，触发事件冒泡进入冒泡阶段，一直从触发的元素逐级想上传递，直至window元素。

事件模型

DOM0级事件

这样的事件模型中，事件是没有事件流的概念的，事件的绑定比较简单：

直接在HTML中绑定事件处理函数

<button onclick="fun()">

通过在js中获取元素来绑定事件

var btn = document.getElementById("btn");
btn.onclick = fun;

移除事件

btn.onclick = null;

DOM2级事件

DOM2级事件现代浏览器都支持，事件流的概念也是支持的。

绑定方式

addEventListener(eventType, handler, useCapture)

移除方式

removeEventListener(eventType, handler, useCapture)

最后一个参数是一个boolean类型的参数，表示是否捕获过程，不填为false。

IE事件

IE事件，取消了事件流中的事件捕获过程。

绑定方式

attachEvent(eventType, handler)

移除方式

detachEvent(eventType, handler)

事件封装

EventUtil={
  addListener:function(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler);
    }else if(target.attachEvent){
        target.attach("on"+type,function(){
              handler.call(target);  //让handler中的this指向目标元素
        });
    }else{
        target["on"+type]=handler;
    }
  },
 removeListener:function(target,type,handler){   
      if(target.removeEventListener){    
        target.removeEventListener(type,handler);          
     }else if(target.detachEvent){
        target.detachEvent("on"+type,handler);
     }else{
        target["on"+type]=null;
     }
  },
 getEvent:function(e){      //获取事件对象
     var evt=window.event||e;
     return evt;
 },
 getTarget:function(e){      //获得目标对象
     var evt=EventUtil.getEvent(e);
     var target;
     if(evt.target){ target=evt.target;}
     else {target=evt.srcElement;}
     return target;
 },
 stopPropagation:function(e){  //停止冒泡
     var evt=EventUtil.getEvent(e);
     if(evt.stopPropagation) {evt.stopPropagation();}
     else {evt.cancelBubble=true;}
 },
 preventDefault:function(e){   //阻值默认行为的发生
     var evt=EventUtil.getEvent(e);
     if(evt.preventDefault){ evt.preventDefault(); }
     else {e.returnValue=false;}
 }
}

事件代理

事件在冒泡过程中会上传到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理(Event delegation)。

<div id="box">
    <input type="button" value="按钮" id="btn">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
</div>

直接通过父节点一次性为所有子结点注册监听函数：

var box = document.getElementById('box');

box.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'input') {
    // some code
  }
});

Mouse 事件

常见的鼠标事件主要是以下几种：

mousedown：鼠标的键钮被按下。
mouseup：鼠标的键钮被释放弹起。
click：单击鼠标的键钮。
dbclick：鼠标的键钮被按下。
contextmenu ：弹出右键菜单。
mouseover：鼠标移到目标的上方。
mouseout：鼠标移出目标的上方。
mousemove：鼠标目标的上方移动。

mousedown事件与mouseup事件可以说click事件在时间上的细分，顺序是mousedown => mouseup => click。因此一个点击事件，通常会激发几个鼠标事件。

在 HTML5 中鼠标有了新的事件，如下表格：

属性	描述
ondrag	元素被拖动时运行的脚本。
ondragend	在拖动操作末端运行的脚本
ondragenter	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	当元素离开有效拖放目标时运行的脚本。
ondragover	当元素在有效拖放目标上正在被拖动时运行的脚本
ondragstart	在拖动操作开端运行的脚本
ondrop	当被拖元素正在被拖放时运行的脚本
onmousewheel	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	当元素滚动条被滚动时运行的脚本。

对上述新增事件的详解参考http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

Keyboard 事件

键盘事件相对较简单，主要在于根据键盘上每个按键对应的ascII码，来执行相应的脚本。

属性	描述
onkeydown	在用户按下按键时触发。
onkeypress	在用户敲击按钮时触发。
onkeyup	当用户释放按键时触发。

Form 事件

下面是Form事件的常见类型：

属性	描述
onblur	元素失去焦点时运行的脚本。
onchange	在元素值被改变时运行的脚本。
onfocus	当元素获得焦点时运行的脚本。
onreset	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	在元素中文本被选中后触发。
onsubmit	在提交表单时触发。

如下为Form事件新增的事件类型：

属性	描述
oncontextmenu	当上下文菜单被触发时运行的脚本。
onformchange	在表单改变时运行的脚本。
onforminput	当表单获得用户输入时运行的脚本。
oninput	当元素获得用户输入时运行的脚本。
oninvalid	当元素无效时运行的脚本。