一、事件冒泡
1、什么是事件冒泡?
事件冒泡:当有多个元素嵌套,并且这些元素绑定了相同的事件,这时候如果里面的元素事件触发了,那么外面的事件会自动触发。
示例:
<body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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、注意在循环里面不要使用匿名函数。
共同学习,写下你的评论
评论加载中...
作者其他优质文章