JS——冒泡案例
模态框
1、因为a链接和和顶级document都注册了单击事件，所以要阻止a链接向父级盒子冒泡，不然又会从document的单击事件走一遍
2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><style>* {padding: 0;margin: 0;}body, html {height: 100%;}.mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.6);display: none;}.login {width: 200px;height: 200px;background: white;margin: 200px auto;border: 3px solid #FFA25E;}style>
head>
<body>
<a href="#">注册a>
<a href="#">登陆a>
<div class="mask"><div class="login" id="login">div>
div>
<script>//需求：点击登陆a链接，显示模态框，之后点击除了中间白色登陆框部分，都可以将模态框部分隐藏var a = document.getElementsByTagName("a")[1];var mask = document.getElementsByTagName("div")[0];a.onclick = function (ev) {ev = ev || window.event;mask.style.display = "block";if (ev || ev.stopPropagation) {ev.stopPropagation();} else {ev.cancelBubble = true;}}document.onclick = function (ev) {ev = ev || window.event;var targetId = ev.target ? ev.target.id : ev.srcElement.id;if (targetId !== "login") {mask.style.display = "none";}}
script>
body>
html> 
事件委托
1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托。
2、虽然新追加的li标签没有注册上单击事件，但是冒泡的特性会找到其父标签，恰好父标签注册了单击，而触发事件的target目标元素如果是li标签就好办了。
3、注意通过event.target.tagName获取的值是大写的
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><style>* {padding: 0;margin: 0;list-style: none;}ul {width: 100px;margin: 50px auto;}li {background: #CCA55B;margin: 10px;cursor: pointer;text-align: center;}style>
head>
<body>
<button>创建新人button>
<ul><li>老人li><li>老人li><li>老人li><li>老人li>
ul>
<script>var btn = document.getElementsByTagName("button")[0];var ul = document.getElementsByTagName("ul")[0];// for (var i = 0; i < ul.children.length; i++) {// ul.children[i].onclick = function () {// console.log(this.innerHTML);// }// }
btn.onclick = function () {for (var i = 0; i < 4; i++) {var li = document.createElement("li");li.innerHTML = "新人";ul.appendChild(li);}}ul.onclick = function (ev) {ev = ev || window.event;var target = ev.target ? ev.target : ev.srcElement;if (target.tagName === "LI") {console.log(target.innerHTML);}}
script>
body>
html> 
转载于:https://www.cnblogs.com/wuqiuxue/p/7988074.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！