内容：

1.事件复习

2.事件冒泡与事件捕获

3.事件委托

1.事件复习

(1)事件

事件是用来处理响应的一个机制，这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器

下面的链接描述了所有事件：https://developer.mozilla.org/en-US/docs/Web/Events

(2)事件绑定

事件绑定有3种方法，前两钟方法在这里不介绍，主要看第三种：

addEventListener方法(使用事件监听绑定事件)

addEventListener：

1 element.addEventListener(event, function, useCapture)

2 event : （必需）事件名，支持所有 DOM事件 注：事件名要去掉开头的on

3 function：（必需）指定要事件触发时执行的函数

4 useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false

2.事件冒泡与事件捕获

  • 事件冒泡：从触发事件的那个节点一直到document，是自下而上的去触发事件
  • 事件捕获：指从document到触发事件的那个节点，即自上而下的去触发事件
  • 事件委托：利用了事件冒泡的原理

  • 补充：绑定事件方法（addEventListener）的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。该参数默认为false，当对一个dom节点触发事件时，若外层的节点也设置了相应的事件函数，就会使外层的节点也触发自己的事件函数，而如果设置该参数为true，当对一个dom节点触发事件时，将从最外层开始触发事件而不是从这个dom节点开始！

阻止事件冒泡：event.cancelBubble = true

取消事件冒泡：

 if(typeof e.cancelBubble == 'undefined'){

     e.stopPropagation();  // 兼容IE

 } else{

     e.cancelBubble = true;

 }

事件冒泡实例：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>事件冒泡和事件捕获</title>

     <style>

         #id1 {

             background: lightblue;

             padding: 20px;

         }

         #id2 {

             background: lightyellow;

             padding: 20px;

         }

     </style>

 </head>

 <body>

 <div id='id1'>

     <div id="id2">

         <button id='id3'>id3 按钮</button>

     </div>

 </div>

 <script>

     var id1 = document.querySelector('#id1');

     var id2 = document.querySelector('#id2');

     var id3 = document.querySelector('#id3');

     // 事件冒泡:

     id1.addEventListener('click', function(event){

         console.log('click id1', event)

     });

     id2.addEventListener('click', function(event){

         console.log('click id2', event)

     });

     id3.addEventListener('click', function(event){

         console.log('click id3', event)

         // 阻止事件冒泡

         // event.cancelBubble = true

     });

 </script>

 </body>

 </html>

事件捕获实例：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>事件冒泡和事件捕获</title>

     <style>

         #id1 {

             background: lightblue;

             padding: 20px;

         }

         #id2 {

             background: lightyellow;

             padding: 20px;

         }

     </style>

 </head>

 <body>

 <div id='id1'>

     <div id="id2">

         <button id='id3'>id3 按钮</button>

     </div>

 </div>

 <script>

     var id1 = document.querySelector('#id1');

     var id2 = document.querySelector('#id2');

     var id3 = document.querySelector('#id3');

     // 事件捕获:

     // addEventListener 的第三个参数 useCapture 设置为true

     id1.addEventListener('click', function(event){

         console.log('capture click id1', event)

     }, true);

     id2.addEventListener('click', function(event){

         console.log('capture click id2', event)

     }, true);

     id3.addEventListener('click', function(event){

         console.log('capture click id3', event)

     }, true);

 </script>

 </body>

 </html>

3.事件委托

 事件委托相关概念

 ===

 在前端中一些元素是动态添加的

 对于这样的元素, 我们没办法实现绑定事件

 我们可以把 click 事件绑定在事先存在的父元素上

 通过父元素响应click事件 调用相应的事件响应函数

 而事件响应函数会被传入一个参数, 就是事件本身

 然后在运行的时候通过 event.target 属性(发起事件的元素，例如某个按钮)

 来检查被点击的对象是否是需要的对象, 如果是就可以对这个对象进行操作, 这个概念就是事件委托

事件委托实例：

 <!-- author: wyb -->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>事件委托实例</title>

 </head>

 <body>

 <div id="test">

     <button class="i1">按钮1</button>

     <button class="i2">按钮2</button>

     <button class="i3">按钮3</button>

 </div>

 </body>

 <script>

     // 事件委托:

     document.querySelector("#test").addEventListener("click", function (event) {

         var target = event.target

         log(target)

         if(target.classList.contains("i1")){

             alert("点击了按钮1")

         }else if(target.classList.contains("i2")){

             alert("点击了按钮2")

         }else if(target.classList.contains("i3")){

             alert("点击了按钮3")

         }

     })

 </script>

 </html>

DOM事件机制(事件捕获和事件冒泡和事件委托)的更多相关文章

  1. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  2. DOM事件机制解惑(摘)--事件的传播机制

    DOM事件流 为什么是有事件流? 假如在一个button上注册了一个click事件,又在其它父元素div上注册了一个click事件,那么当我们点击button,是先触发父元素上的事件,还是button ...

  3. [解惑]JavaScript事件机制

    群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”. 初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会 ...

  4. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  5. JavaScript系列----事件机制

    1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...

  6. JavaScript事件机制——细思极恐

    JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...

  7. Aa3.0 事件机制

    说明:本文由多处网络文章整理而成,在此未一一注明原文链接,敬请谅解! AS3:事件流机制  事件流 只要发生事件,Flash Player就会调度该事件对象. 如果事件目标不在显示列表中,则Flash ...

  8. JavaScript事件起泡与捕获

    // 向 <div> 元素添加事件句柄 document.getElementById("myDIV").addEventListener("mousemov ...

  9. js的事件机制二

    js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...

  10. ALSA声卡驱动中的DAPM详解之七：dapm事件机制（dapm event）

    前面的六篇文章,我们已经讨论了dapm关于动态电源管理的有关知识,包括widget的创建和初始化,widget之间的连接以及widget的上下电顺序等等.本章我们准备讨论dapm框架中的另一个机制:事 ...

随机推荐

  1. [编程题] N阶楼梯上楼问题

    import sys for line in sys.stdin: N=int(line.split()[0]) d1=1 d2=2 if(N==1): print 1 continue elif(N ...

  2. HDU 1232：畅通工程（并查集模板）

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. JNI学习笔记_Java调用C —— Android中使用的方法

    一.笔记 1.JNI(Java Native Interface),就是如何使用java去访问C/C++编写的那些库.若想深入了解JNI可以看官方文档jni.pdf.优秀博文:Android JNI知 ...

  4. Git Authoritative Guide 学习

    一.git命令1.git add -u : 将工作区中所有改动的文件添加到暂存区(修改.删除),但是不提交未被git跟踪的文件 -i : 可以进入交互界面选择性提交 -A : 相对于-u,它还提交新建 ...

  5. 基于server broker 的数据实时更新

    Service Broker介绍:SQL Server Service Broker 为消息和队列应用程序提供 SQL Server 数据库引擎本机支持.这使开发人员可以轻松地创建使用数据库引擎组件在 ...

  6. Understanding Safari Reader

    Interesting enough to find out the Reader function in Safari is actually Javascript and there are ma ...

  7. Ritchie Lawrence 批处理函数库中英文版

    可以到这个网址去看看,如果你是注册用户,还可以下载到bat的很多函数库,具体地址如下: http://www.bathome.net/viewthread.php?tid=3056&extra ...

  8. memcache 和 memcached 区别

    区别用一句话表达:Memcached (字母d可以理解为daemon)是一个服务(运行在服务器上的程序,监听某个端口),Memcache 是 一套访问Memcached的api. memcache客户 ...

  9. win10激活命令

    以管理员方式打开命令提示符输入以下3条命令slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 按回车slmgr /skms 54.223.212.31 按回车slmgr ...

  10. Jmeter中Websocket协议支持包的使用(转）

    转自:http://blog.csdn.net/typing_yes_no/article/details/49512167 参考的来源是国外一篇文章,已经整理成pdf格式(http://yunpan ...