Web 前端的事件讲解

事件与事件流

事件是与浏览器或文档交互的瞬间,如点击按钮,填写表格等,它是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 当元素无效时运行的脚本。

主要参考的技术网站如下:

https://li-xinyang.gitbooks.io/frontend-notebook/content/chapter3/05_events.html
https://segmentfault.com/a/1190000003497939
https://segmentfault.com/a/1190000006934031#articleHeader0
https://leohxj.gitbooks.io/front-end-database/javascript-basic/events.html
http://www.cnblogs.com/rubylouvre/archive/2009/08/24/1552862.html

 

原文链接 https://www.qcloud.com/community/article/773417?fromSource=gwzcw.149915.149915.149915

未经允许不得转载:绿岛小站 » Web 前端的事件讲解

赞 (0)

评论 0

评论前必须登录!

登陆 注册