内容：

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. 谈ObjC对象的两段构造模式

    前言 Objective-c语言在申请对象的时,需要使用两段构造(Two Stage Creation)的模式.一个对象的创建,需要先调用alloc方法或allocWithZone方法,再调用init ...

  2. hdu2066 一个人的旅行 最短路

    单源最短路裸题 #include<stdio.h> #include<string.h> #define min(a,b) (a)<(b)?a:b #define INF ...

  3. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.4 LHS简介&Pattern

    LHS简介 在规则文件组成章节,我们已经了解了LHS的基本使用说明.LHS是规则条件部分的统称,由0个或多个条件元素组成.前面我们已经提到,如果没有条件元素那么默认就是true. 没有条件元素,官方示 ...

  4. AGC014E Blue and Red Tree

    题意 There is a tree with \(N\) vertices numbered \(1\) through \(N\). The \(i\)-th of the \(N−1\) edg ...

  5. nodejs 使用express开发获取其他网站引用本站点js文件的参数

    nodejs进行站点的开发其性能是很好的,在js 大行其道的天下,使用js基本上可以干好多只要我们能想到的东西,我们可以使用js文件进行用户验证等等. 这次我们就使用express 进行获取其他站点引 ...

  6. 如何取出word文档里的图片

    在生活当中,Word办公是必不可少的.但是在工作中也会遇到一些麻烦,比如说如何取出word文档里的图片呢?有的人会通过复制粘贴,通过画图保存,可是这种方法未免太繁琐了吧.下面我就来分享一下我的经验. ...

  7. php利用curl获取网页title内容

    /**$html = curl_get_file_contents($url); $title = get_title_contents($html); var_dump($title);*/ fun ...

  8. Spring Cloud 入门 之 Zuul 篇（五）

    原文地址:Spring Cloud 入门 之 Zuul 篇(五) 博客地址:http://www.extlight.com 一.前言 随着业务的扩展,微服务会不对增加,相应的其对外开放的 API 接口 ...

  9. Go随机数的使用

    随机数使用比较广泛,例如,抽奖.均衡等等. 下面简单说明其使用方法. Example1 package main import ( "log" "math/rand&qu ...

  10. MySQL 瓶颈及应对措施

    注:内容摘抄自<PHP 核心技术与最佳实践>一书 MySQL 是存在瓶颈的. 当 MySQL 单表数据量达到千万级别以上时,无论如何对 MySQL 进行优化,查询如何简单,MySQL 的性 ...