大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

+------------------------------------------------------------

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

+-----------------------------------------------------------

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、事件冒泡

1、什么是事件冒泡？

事件冒泡：当有多个元素嵌套，并且这些元素绑定了相同的事件，这时候如果里面的元素事件触发了，那么外面的事件会自动触发。

示例：

  1. <body>
  2.     <div id="dv1">
  3.         <div id="dv2">
  4.             <div id="dv3"></div>
  5.         </div>
  6.     </div>
  8.     <script src="common.js"></script>
  9.     <script>
  10.         my$("dv1").onclick = function() {
  11.             console.log(this.id);
  12.         }
  13.         my$("dv2").onclick = function() {
  14.             console.log(this.id);
  15.         }
  16.         my$("dv3").onclick = function() {
  17.             console.log(this.id);
  18.         }
  19.     </script>
  20. </body>

2、阻止事件冒泡

2.1、方式一

window.event.cancelBubble = true;

注意： Chrome,IE8 支持，firefox 不支持

2.2、方式二

在事件处理函数中传一个参数 e，然后调用 e.stopPropagation();

注意：Chrome,firefox 支持， IE8 不支持。

window.event 和 e 都是事件处理参数对象，一个是 IE 标准，一个是 firefox 标准。

  1. <body>
  2.     <div id="dv1">
  3.         <div id="dv2">
  4.             <div id="dv3"></div>
  5.         </div>
  6.     </div>
  8.     <script src="common.js"></script>
  9.     <script>
  10.         my$("dv1").onclick = function() {
  11.             console.log(this.id);
  12.         }
  13.         my$("dv2").onclick = function() {
  14.             console.log(this.id);
  15.             window.event.cancelBubble = true;
  16.         }
  17.         my$("dv3").onclick = function(e) {
  18.             console.log(this.id);
  19.             e.stopPropagation();
  20.         }
  21.     </script>
  22. </body>

这时候可以写兼容代码的，由于用到 window ，但是没学到 BOM，所以先不写。

3、事件的三个阶段

  1. 事件捕获阶段（从外向内） ===> 阶段 1
  2. 事件目标阶段（最开始触发事件的目标）===> 阶段 2
  3. 事件冒泡阶段（从里向外） ===> 阶段 3

  • 通过事件处理参数对象 e.eventPhase 属性可以查看当前事件所处的阶段。

    若为1：捕获阶段

    若为2：目标阶段

    若为3：冒泡阶段

  • addEventListener 绑定事件处理方法中第三个参数：控制事件的阶段

    true: 控制事件为捕获阶段

    false: 控制事件为冒泡阶段

  • 一般默认使用冒泡阶段，很少使用捕获阶段。

  1. <body>
  2.     <div id="dv1">
  3.         <div id="dv2">
  4.             <div id="dv3"></div>
  5.         </div>
  6.     </div>
  8.     <script src="common.js"></script>
  9.     <script>
  10.         my$("dv1").addEventListener("click", function(e) {
  11.             console.log(this.id +" --- "+ e.eventPhase);
  12.         }, false);
  13.         my$("dv2").addEventListener("click", function(e) {
  14.             console.log(this.id +" --- "+ e.eventPhase);
  15.         }, false);
  16.         my$("dv3").addEventListener("click", function(e) {
  17.             console.log(this.id +" --- "+ e.eventPhase);
  18.         }, false);
  20. // -------------------------------------------------------
  21. // addEventListener 的第三个参数为 false
  22. // 点击最里面的 dv3
  23. //dv3 --- 2 : 因为是冒泡阶段，从里向外，从 dv3开始，dv3是目标，所以为2
  24. //dv2 --- 3：冒泡阶段，所以为3
  25. //dv1 --- 3：冒泡阶段，所以为3
  27. // 如果将 false 都改为 true 的话：
  28. // 点击最里面的 dv3
  29. //dv1 --- 1：捕获阶段，从外向里，从dv1开始捕获，所以dv1为1
  30. //dv2 --- 1：捕获阶段，从外向里
  31. //dv3 --- 2：捕获阶段，从外向里，到达dv3目标，随意dv3为目标阶段。
  33.     </script>
  34. </body>

二、小案例

目的：为同一个元素绑定多个不同的事件指向相同的事件处理函数。

  1. <body>
  2.     <input type="button" value="按钮" id="btn" >
  4.     <script src="common.js"></script>
  5.     <script>
  6.         my$("btn").onclick = func;
  7.         my$("btn").onmouseover = func;
  8.         my$("btn").onmouseout = func;
  10.         function func(e) {
  11.             switch(e.type) {
  12.                 case "click" :
  13.                     console.log("onclick");
  14.                     break;
  15.                 case "mouseover" :
  16.                     console.log("onmouseover");
  17.                     break;
  18.                 case "mouseout" :
  19.                     console.log("onmouseout");
  20.                     break;
  21.                 default:
  22.                     break;
  23.             }
  24.         }
  25.     </script>
  26. </body>

使用事件处理参数对象的 type 属性可以判断事件触发时候，事件的类型，从而做出相应的事件处理。

三、百度搜索小项目

目标：在搜索框输入关键字，自动在搜索框下方显示相关内容。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         #dv1 {
  13.             width: 500px;
  14.             margin-top: 100px;
  15.             margin-left: 200px;
  16.             font: 400 18px/30px "Microsoft Yahei";
  17.             color: #595959;
  18.         }
  20.         input {
  21.             width: 500px;
  22.             height: 30px;
  23.         }
  25.         .dvv {
  26.             width: 500px;
  27.             /*height: 10px;*/
  28.             border: 1px solid green;
  29.         }
  31.         .ps {
  32.             padding: 2px 0 2px 5px;
  33.             cursor: pointer;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <div id="dv1">
  39.     <input type="text" placeholder="日向雏田" id="txt">
  40. </div>
  42. <script src="common.js"></script>
  43. <script>
  44.     var KeyWords = [
  45.         "旋涡鸣人", "旋涡辛久奈", "旋风小子", "旋风少女",
  46.         "日向雏田", "日向花火", "日向本家",
  47.         "奈良鹿丸", "奈良大佐",
  48.         "旗木卡卡西"
  49.     ];
  51.     my$("txt").onkeyup = function () {
  52.         while(my$("dv2")) {
  53.             my$("dv1").removeChild(my$("dv2"));
  54.         }
  55.         // console.log(this.value);
  56.         var findArr = []; // 每次输入文字的时候都先清除临时数组
  57.         for (var i = 0; i < KeyWords.length; i++) {
  58.             if (KeyWords[i].indexOf(this.value) === 0) {
  59.                 // console.log("yes");
  60.                 findArr.push(KeyWords[i]);
  61.             }
  62.         }
  63.         // 文本框输入了内容，并且临时数组不为空
  64.         if ((findArr.length !== 0) && (this.value.length !== 0)) {
  66.             var dvObj = document.createElement("div");
  67.             dvObj.className = "dvv";
  68.             dvObj.id = "dv2";
  69.             my$("dv1").appendChild(dvObj);
  71.             for (var i = 0; i < findArr.length; i++) {
  72.                 var pObj = document.createElement("p");
  73.                 pObj.className = "ps";
  74.                 setInnerText(pObj, findArr[i]);
  75.                 my$("dv2").appendChild(pObj);
  77.                 pObj.onmouseover = f1; // 循环里面不要使用匿名函数
  78.                 pObj.onmouseout = f2;
  80.             }
  81.         }
  82.     };
  84.     function f1() {
  85.         this.style.backgroundColor = "greenyellow";
  86.     }
  87.     function f2() {
  88.         this.style.backgroundColor = "";
  89.     }
  90. </script>
  91. </body>
  92. </html>

1、这里的候选数据本来应该来自服务器，这里用数组来模拟。

2、这里使用的是鼠标输入文字后的鼠标抬起事件：onkeyup。

3、 需要准备个临时数组存储于文本框输入文字匹配的字符串。

4、当搜索框的文本为空或者临时数组的内容为空时，循环删除下拉列表。

5、之所以输入多个文字，但是只创建了一个下拉列表的原因是因为在输入第二个文字的时候，先输入的其实是字母，这个时候不匹配，而我们在每次鼠标抬起的时候会清空临时数组，所以这个时候会先删除下拉列表，当我们输入第二个文字的时候，再重新创建相匹配的下拉列表。

6、每次进入鼠标抬起按键时，如果有下拉列表就循环删除。

7、注意在循环里面不要使用匿名函数。

从零开始学 Web 之 DOM（七）事件冒泡的更多相关文章

  1. 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  2. 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  3. 从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  4. 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. 从零开始学 Web 之 DOM（五）元素的创建

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  6. 从零开始学 Web 之 DOM（四）节点

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  7. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  8. 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. JSP中JavaScript校验用户名等重复

    $(function () { $("#unitFrom").validate({ errorClass:"errorInfo", //默认为错误的样式类为:e ...

  2. Python开发——函数【基础】

    函数的定义 以下规则 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号(). 任何传入参数和自变量必须放在圆括号中间.圆括号之间可以用于定义参数. 函数的第一行语句可以选择性地使用文档字符 ...

  3. 转 node.js和 android中java加密解密一致性问题;

    原文地址,请大家去原文博客了解; http://blog.csdn.net/linminqin/article/details/19972751 我保留一份,防止删除: var crypto = re ...

  4. MongoDB 官网教程 下载 安装

    官网:https://www.mongodb.com/ Doc:https://docs.mongodb.com/ Manual:https://docs.mongodb.com/manual/ 安装 ...

  5. nginx的https代理http配置

    http { upstream https2http_proxy{ server 192.168.22.103:80; } server { listen 1443 ssl; server_name ...

  6. 第36章：MongoDB-集群--Replica Sets(副本集)

    ①副本集 副本集是一种在多台机器同步数据的进程,副本集体提供了数据冗余,扩展了数据可用性.在多台服务器保存数据可以避免因为一台服务器导致的数据丢失.也可以从硬件故障或服务中断解脱出来,利用额外的数据副 ...

  7. http错误代码提示

    1×× 保留 2×× 表示请求成功地接收 3×× 为完成请求客户需进一步细化请求 4×× 客户错误 5×× 服务器错误 200  正常:请求已完成.  201  正常:紧接 POST 命令.  202 ...

  8. Unity3D使用EasyMovieTexture插件播放视频

    Unity3D对于视频的播放兼容个人感觉很差劲,之前写过一篇使用Unity3D自己自带的一些功能去播放视频,链接如下: http://www.cnblogs.com/xiaoyulong/p/8627 ...

  9. [预打印]使用vbs给PPT(包括公式)去背景

    原先博客放弃使用,几篇文章搬运过来 在 视图—>宏 内新建宏 '终极版 Sub ReColor() Dim sld As Slide Dim sh As Shape For Each sld I ...

  10. linux系统下载pycharm

    如何下载pycharm安装包? 你可以通过访问 https://www.jetbrains.com/pycharm/download/#section=linux 获取安装包,如果是新手建议使用社区版 ...