大家好,这里是「 从零开始学 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>
  7. <script src="common.js"></script>
  8. <script>
  9. my$("dv1").onclick = function() {
  10. console.log(this.id);
  11. }
  12. my$("dv2").onclick = function() {
  13. console.log(this.id);
  14. }
  15. my$("dv3").onclick = function() {
  16. console.log(this.id);
  17. }
  18. </script>
  19. </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>
  7. <script src="common.js"></script>
  8. <script>
  9. my$("dv1").onclick = function() {
  10. console.log(this.id);
  11. }
  12. my$("dv2").onclick = function() {
  13. console.log(this.id);
  14. window.event.cancelBubble = true;
  15. }
  16. my$("dv3").onclick = function(e) {
  17. console.log(this.id);
  18. e.stopPropagation();
  19. }
  20. </script>
  21. </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>
  7. <script src="common.js"></script>
  8. <script>
  9. my$("dv1").addEventListener("click", function(e) {
  10. console.log(this.id +" --- "+ e.eventPhase);
  11. }, false);
  12. my$("dv2").addEventListener("click", function(e) {
  13. console.log(this.id +" --- "+ e.eventPhase);
  14. }, false);
  15. my$("dv3").addEventListener("click", function(e) {
  16. console.log(this.id +" --- "+ e.eventPhase);
  17. }, false);
  18. // -------------------------------------------------------
  19. // addEventListener 的第三个参数为 false
  20. // 点击最里面的 dv3
  21. //dv3 --- 2 : 因为是冒泡阶段,从里向外,从 dv3开始,dv3是目标,所以为2
  22. //dv2 --- 3:冒泡阶段,所以为3
  23. //dv1 --- 3:冒泡阶段,所以为3
  24. // 如果将 false 都改为 true 的话:
  25. // 点击最里面的 dv3
  26. //dv1 --- 1:捕获阶段,从外向里,从dv1开始捕获,所以dv1为1
  27. //dv2 --- 1:捕获阶段,从外向里
  28. //dv3 --- 2:捕获阶段,从外向里,到达dv3目标,随意dv3为目标阶段。
  29. </script>
  30. </body>

二、小案例

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

  1. <body>
  2. <input type="button" value="按钮" id="btn" >
  3. <script src="common.js"></script>
  4. <script>
  5. my$("btn").onclick = func;
  6. my$("btn").onmouseover = func;
  7. my$("btn").onmouseout = func;
  8. function func(e) {
  9. switch(e.type) {
  10. case "click" :
  11. console.log("onclick");
  12. break;
  13. case "mouseover" :
  14. console.log("onmouseover");
  15. break;
  16. case "mouseout" :
  17. console.log("onmouseout");
  18. break;
  19. default:
  20. break;
  21. }
  22. }
  23. </script>
  24. </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. }
  11. #dv1 {
  12. width: 500px;
  13. margin-top: 100px;
  14. margin-left: 200px;
  15. font: 400 18px/30px "Microsoft Yahei";
  16. color: #595959;
  17. }
  18. input {
  19. width: 500px;
  20. height: 30px;
  21. }
  22. .dvv {
  23. width: 500px;
  24. /*height: 10px;*/
  25. border: 1px solid green;
  26. }
  27. .ps {
  28. padding: 2px 0 2px 5px;
  29. cursor: pointer;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="dv1">
  35. <input type="text" placeholder="日向雏田" id="txt">
  36. </div>
  37. <script src="common.js"></script>
  38. <script>
  39. var KeyWords = [
  40. "旋涡鸣人", "旋涡辛久奈", "旋风小子", "旋风少女",
  41. "日向雏田", "日向花火", "日向本家",
  42. "奈良鹿丸", "奈良大佐",
  43. "旗木卡卡西"
  44. ];
  45. my$("txt").onkeyup = function () {
  46. while(my$("dv2")) {
  47. my$("dv1").removeChild(my$("dv2"));
  48. }
  49. // console.log(this.value);
  50. var findArr = []; // 每次输入文字的时候都先清除临时数组
  51. for (var i = 0; i < KeyWords.length; i++) {
  52. if (KeyWords[i].indexOf(this.value) === 0) {
  53. // console.log("yes");
  54. findArr.push(KeyWords[i]);
  55. }
  56. }
  57. // 文本框输入了内容,并且临时数组不为空
  58. if ((findArr.length !== 0) && (this.value.length !== 0)) {
  59. var dvObj = document.createElement("div");
  60. dvObj.className = "dvv";
  61. dvObj.id = "dv2";
  62. my$("dv1").appendChild(dvObj);
  63. for (var i = 0; i < findArr.length; i++) {
  64. var pObj = document.createElement("p");
  65. pObj.className = "ps";
  66. setInnerText(pObj, findArr[i]);
  67. my$("dv2").appendChild(pObj);
  68. pObj.onmouseover = f1; // 循环里面不要使用匿名函数
  69. pObj.onmouseout = f2;
  70. }
  71. }
  72. };
  73. function f1() {
  74. this.style.backgroundColor = "greenyellow";
  75. }
  76. function f2() {
  77. this.style.backgroundColor = "";
  78. }
  79. </script>
  80. </body>
  81. </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 获取安装包,如果是新手建议使用社区版 ...