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

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

何雪斌的专栏

1 篇文章1 人订阅

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于HTML5 Canvas 实现弹出框

  用户鼠标移入时,有弹出框出现,这样的需求很常见。这在处理HTML元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用...

2777
来自专栏更流畅、简洁的软件开发方式

页面和页面里的控件的事件的执行顺序。

      第一次访问的时候的执行顺序:       1、页面的Oninit事件       2、页面的InitComplete事件       3、页面的Pr...

1808
来自专栏青玉伏案

IOS开发之自动布局显示网络请求内容

  在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的...

1786
来自专栏挖坑填坑

Angular练习之animations动画

让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定...

671
来自专栏前端说吧

js - 预加载+监听图片资源加载制作进度条

这两天遇到一个新需求:一个一镜到底的h5动画。因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。

591
来自专栏西枫里博客

imagestring生成验证码字符太小,采用imagettftext函数的验证码修正版

imagestring只内置了5中字符大小,在前端根据美工设计常常无法满足需求。采用imagettftext函数生成验证码图片,可自定义字体和大小。源码如下:

671
来自专栏快乐八哥

IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'

项目中使用的是DIV+CSS布局,有一个页面是同事完成的,这几天他请假有事。项目发现一个UI Bug。在IE7下,某一个Div的padding-top会让整个d...

1965
来自专栏极乐技术社区

一斤代码深入理解系列(一):微信小程序事件机制

事件机制是一种非常典型的通讯方式,可以在代码中的不同对象之间传递信息,也可以在应用的不同层面进行沟通协作。今天我们想看来一下微信小程序框架提供的事件处理机制。 ...

1785
来自专栏吴裕超

阻止a标签的默认事件及延伸

先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...

2656
来自专栏一“技”之长

MJRefresh源码分析 原

    MJRefresh主要为UIScrollView,UITableView和UICollectionView添加头部和尾部刷新控件。其主要由3大块组成,类...

451

扫码关注云+社区