从零开始学 Web 之 DOM（七）事件冒泡
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公众号：Web前端之巅
博客园：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、事件冒泡
1、什么是事件冒泡？
事件冒泡：当有多个元素嵌套，并且这些元素绑定了相同的事件，这时候如果里面的元素事件触发了，那么外面的事件会自动触发。
示例：
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
my$("dv1").onclick = function() {
console.log(this.id);
}
my$("dv2").onclick = function() {
console.log(this.id);
}
my$("dv3").onclick = function() {
console.log(this.id);
}
</script>
</body>
2、阻止事件冒泡
2.1、方式一
window.event.cancelBubble = true;
注意： Chrome,IE8 支持，firefox 不支持
2.2、方式二
在事件处理函数中传一个参数 e，然后调用 e.stopPropagation();
注意：Chrome,firefox 支持， IE8 不支持。
window.event 和 e 都是事件处理参数对象，一个是 IE 标准，一个是 firefox 标准。
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
my$("dv1").onclick = function() {
console.log(this.id);
}
my$("dv2").onclick = function() {
console.log(this.id);
window.event.cancelBubble = true;
}
my$("dv3").onclick = function(e) {
console.log(this.id);
e.stopPropagation();
}
</script>
</body>
这时候可以写兼容代码的，由于用到 window ，但是没学到 BOM，所以先不写。
3、事件的三个阶段
- 事件捕获阶段（从外向内） ===> 阶段 1
- 事件目标阶段（最开始触发事件的目标）===> 阶段 2
- 事件冒泡阶段（从里向外） ===> 阶段 3
通过事件处理参数对象
e.eventPhase属性可以查看当前事件所处的阶段。若为1：捕获阶段
若为2：目标阶段
若为3：冒泡阶段
addEventListener 绑定事件处理方法中第三个参数：控制事件的阶段
true: 控制事件为捕获阶段
false: 控制事件为冒泡阶段
一般默认使用冒泡阶段，很少使用捕获阶段。
<body>
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
my$("dv1").addEventListener("click", function(e) {
console.log(this.id +" --- "+ e.eventPhase);
}, false);
my$("dv2").addEventListener("click", function(e) {
console.log(this.id +" --- "+ e.eventPhase);
}, false);
my$("dv3").addEventListener("click", function(e) {
console.log(this.id +" --- "+ e.eventPhase);
}, false);
// -------------------------------------------------------
// addEventListener 的第三个参数为 false
// 点击最里面的 dv3
//dv3 --- 2 : 因为是冒泡阶段，从里向外，从 dv3开始，dv3是目标，所以为2
//dv2 --- 3：冒泡阶段，所以为3
//dv1 --- 3：冒泡阶段，所以为3
// 如果将 false 都改为 true 的话：
// 点击最里面的 dv3
//dv1 --- 1：捕获阶段，从外向里，从dv1开始捕获，所以dv1为1
//dv2 --- 1：捕获阶段，从外向里
//dv3 --- 2：捕获阶段，从外向里，到达dv3目标，随意dv3为目标阶段。
</script>
</body>
二、小案例
目的：为同一个元素绑定多个不同的事件指向相同的事件处理函数。
<body>
<input type="button" value="按钮" id="btn" >
<script src="common.js"></script>
<script>
my$("btn").onclick = func;
my$("btn").onmouseover = func;
my$("btn").onmouseout = func;
function func(e) {
switch(e.type) {
case "click" :
console.log("onclick");
break;
case "mouseover" :
console.log("onmouseover");
break;
case "mouseout" :
console.log("onmouseout");
break;
default:
break;
}
}
</script>
</body>
使用事件处理参数对象的 type 属性可以判断事件触发时候，事件的类型，从而做出相应的事件处理。
三、百度搜索小项目
目标：在搜索框输入关键字，自动在搜索框下方显示相关内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#dv1 {
width: 500px;
margin-top: 100px;
margin-left: 200px;
font: 400 18px/30px "Microsoft Yahei";
color: #595959;
}
input {
width: 500px;
height: 30px;
}
.dvv {
width: 500px;
/*height: 10px;*/
border: 1px solid green;
}
.ps {
padding: 2px 0 2px 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="dv1">
<input type="text" placeholder="日向雏田" id="txt">
</div>
<script src="common.js"></script>
<script>
var KeyWords = [
"旋涡鸣人", "旋涡辛久奈", "旋风小子", "旋风少女",
"日向雏田", "日向花火", "日向本家",
"奈良鹿丸", "奈良大佐",
"旗木卡卡西"
];
my$("txt").onkeyup = function () {
while(my$("dv2")) {
my$("dv1").removeChild(my$("dv2"));
}
// console.log(this.value);
var findArr = []; // 每次输入文字的时候都先清除临时数组
for (var i = 0; i < KeyWords.length; i++) {
if (KeyWords[i].indexOf(this.value) === 0) {
// console.log("yes");
findArr.push(KeyWords[i]);
}
}
// 文本框输入了内容，并且临时数组不为空
if ((findArr.length !== 0) && (this.value.length !== 0)) {
var dvObj = document.createElement("div");
dvObj.className = "dvv";
dvObj.id = "dv2";
my$("dv1").appendChild(dvObj);
for (var i = 0; i < findArr.length; i++) {
var pObj = document.createElement("p");
pObj.className = "ps";
setInnerText(pObj, findArr[i]);
my$("dv2").appendChild(pObj);
pObj.onmouseover = f1; // 循环里面不要使用匿名函数
pObj.onmouseout = f2;
}
}
};
function f1() {
this.style.backgroundColor = "greenyellow";
}
function f2() {
this.style.backgroundColor = "";
}
</script>
</body>
</html>
1、这里的候选数据本来应该来自服务器，这里用数组来模拟。
2、这里使用的是鼠标输入文字后的鼠标抬起事件：onkeyup。
3、 需要准备个临时数组存储于文本框输入文字匹配的字符串。
4、当搜索框的文本为空或者临时数组的内容为空时，循环删除下拉列表。
5、之所以输入多个文字，但是只创建了一个下拉列表的原因是因为在输入第二个文字的时候，先输入的其实是字母，这个时候不匹配，而我们在每次鼠标抬起的时候会清空临时数组，所以这个时候会先删除下拉列表，当我们输入第二个文字的时候，再重新创建相匹配的下拉列表。
6、每次进入鼠标抬起按键时，如果有下拉列表就循环删除。
7、注意在循环里面不要使用匿名函数。
从零开始学 Web 之 DOM（七）事件冒泡的更多相关文章
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（四）节点
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- [leetcode]64. Minimum Path Sum最小路径和
Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...
- xpath&css选择器
本文参考较多,原创基本没有,权当知识归纳. xpath并不复杂,简单的使用看完之后,及时查阅文档也是可以写出来的. 这里放上我的练手文件,大家可以参考,或者挑毛病(*^__^*) 嘻嘻-- xpath ...
- caoni大业 spring boot 跳坑记
IDEA环境 win10 跑得刚刚,到xp系统就戈壁 报错 Caused by: java.lang.NoSuchMethodError: javax.servlet.ServletContext.g ...
- 1.2 eigen中矩阵和向量的运算
1.2 矩阵和向量的运算 1.介绍 eigen给矩阵和向量的算术运算提供重载的c++算术运算符例如+,-,*或这一些点乘dot(),叉乘cross()等等.对于矩阵类(矩阵和向量,之后统称为矩阵 类) ...
- Reading | 《Python基础教程》第1次阅读
目录 一.基础知识 1.数和表达式 浮点除法和整数除法 负数整除和取余 圆整 乘方运算 2.变量名 3.获取用户输入 4.模块 5.让脚本像普通程序一样 6.字符串 单.双引号 引号的转义 字符串拼接 ...
- Alpha冲刺 （2/10）
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 学习并配置了ssm框架(用于前后端交 ...
- 完整的SOPC开发流程体验
课程目标:学习并掌握完整的SOPC开发流程. 开发环境:Quartus15.1 学习内容:1.使用QSYS工具建立能够运行流水灯项目的NIOS II处理器系统 2.在quartus ii中添加NIOS ...
- wampserver 的默认首页设置
# wampserver 首页顺序设置 <IfModule dir_module> DirectoryIndex index.php default.php index.html inde ...
- [转]语音识别中区分性训练（Discriminative Training）和最大似然估计（ML）的区别
转:http://blog.sina.com.cn/s/blog_66f725ba0101bw8i.html 关于语音识别的声学模型训练方法已经是比较成熟的方法,一般企业或者研究机构会采用HTK工具包 ...
- 数据库路由中间件MyCat - 源代码篇（7）
此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 3. 连接模块 3.4 FrontendConnection前端连接 构造方法: public Fronte ...