事件流程分为三个阶段:捕获阶段、目标阶段、冒泡阶段。

捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素。

目标阶段:事件在精确元素上执行。

冒泡阶段:事件从精确元素开始执行,一层层往上,直到顶层元素(注:高级浏览器的顶层元素是window,ie8以下的浏览器顶层元素是document)

 DOM2级事件绑定方式 
 高级浏览器绑定方式:
元素.addEventListener(type, handler, boolean);             //绑定
  type 事件类型字符串  不带on
  handler 事件处理函数
  boolean 布尔值  如果值为true 该绑定是绑定到捕获阶段 否则绑定到冒泡阶段
元素.removeEventListener(type, handler, boolean);      //移除绑定
  type 事件类型字符串  不带on
  handler 事件处理函数
  boolean 布尔值  如果值为true 是移除捕获阶段 否则移除冒泡阶段
IE8以下浏览器绑定方式(不支持addEventListener )
元素.attachEvent(type, handler)            //绑定
  type 事件类型字符串  带on
  handler 事件处理函数
元素.detachEvent(type, handler)         //移除绑定
  type 事件类型字符串  带on
  handler 事件处理函数
(注:ie8以下浏览器绑定方式没有第三个参数,表示不能绑定到捕获阶段)
 
dom2级事件可以重复绑定,在高级浏览器中的执行顺序是从上至下。在ie8以下浏览器中是倒叙执行,但是当attachEvent和dom0级一起执行时,会先执行0级,然后再倒叙执行。

事件流程以及dom2级事件绑定的更多相关文章

  1. JS事件委托(事件代理,dom2级事件)

    一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...

  2. js事件处理程序详解,html事件处理程序,dom0级事件处理程序,dom2级事件处理程序

    博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/24/js%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e ...

  3. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  4. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  5. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  6. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

  7. DOM0、DOM2级事件

    JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...

  8. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  9. 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

随机推荐

  1. Mysql安装及用简单用法

    Mysql安装和初始化 初见: Mysql软件 - 服务端软件 - 服务端程序 - 解析指令 - 对文件的操作 - 客户端软件 - 客户端程序 - 发送指令(sql语句) - 解析指令 其他类似软件: ...

  2. 根据linux自带的JDK,配置JAVA_HOME目录

    在配置hadoop是,进行格式化hadoop的时候,出现找不到jdk 我用centos6.5是64位的, 发现本机有java ,就找了一下其位置 找到了jdk-1.7.0_75 which java ...

  3. Windows Server 部署WEB API时内部错误

    Windows Server 部署WEB API时,发生HTTP 错误 500.21 - Internal Server Error,如图所示: 错误原因:IIS注册Framework4.0 解决方法 ...

  4. ArrayList类源码浅析(一)

    1.首先来看一下ArrayList类中的字段 可以看出,ArrayList维护了一个Object数组,默认容量是10,size记录数组的长度: 2.ArrayList提供了三个构造器:ArrayLis ...

  5. Yii2.0简单隐藏index.php文件和模块配置和layout布局配置禁用和日志写入配置

    隐藏index.php文件 目的:想去掉浏览器地址栏中的 index.php?r= 这一块. 在/config/web.php中   ’components'=>[]   中添加如下代码: 'u ...

  6. WOSA XFS 官方文档地址

    WOSA XFS 官方文档地址: ftp://ftp.cencenelec.eu/CWA/CEN/WS-XFS/

  7. MYSQL常见安装错误集:[ERROR] --initialize specified but the data directory has files in it. Abort

    1.[ERROR] --initialize specified but the data directory has files in it. Abort [错误] -初始化指定,但数据目录中有文件 ...

  8. HTTP学习记录:二、请求方法

    学习资源主要为:@小坦克HTTP相关博客 最基础的是4种,GET.POST.PUT.DELETE对应着对资源的查.改.增.删.最常用的是GET和POST. GET一般用于获取/查询资源信息: POST ...

  9. div动画旋转效果

    animation: spin 10s linear infinite;

  10. Flex String拼接

    平时Flex String拼接的时候直接str+str2 今天就想看看Flex自带的函数好不好用,然后使用 str.concat(str2); Alert.show(str); 结果没有变化,才发现一 ...