模态框
1、因为a链接和和顶级document都注册了单击事件，所以要阻止a链接向父级盒子冒泡，不然又会从document的单击事件走一遍
2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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>Title</title> <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>
