JavaScript基础(30)_事件的冒泡、事件的委派
事件的冒泡(Bubble)
所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的“相同事件”也会被触发。
取消事件冒泡
在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。取消冒泡代码：event.cancelBubble = true
事件的委派
将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，从而提高程序的性能。
简单理解就是：原本是某个元素需要绑定的事件，现在将这个事件交给别的元素去做，正常我们把它交给父级元素，比如：原本是给li绑定点击事件，现在交给它父级ul绑定，利用冒泡原理，点击li的时候会触发ul的事件；
案例1：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件的冒泡</title><style>.box1 {width: 300px;height: 300px;background-color: aquamarine;position: relative;}.box2 {width: 250px;height: 250px;background-color: bisque;position: relative;}.box3 {width: 150px;height: 150px;background-color: chartreuse;position: relative;}span {position: absolute;bottom: 10px;right: 20px;}</style><script>window.onload = function () {var box3 = document.getElementsByClassName("box3")[0];box3.onclick = function (event) {// 解决浏览器兼容性问题event = event || window.event;// 取消冒泡event.cancelBubble = true;alert("你好！我是box3");}var box2 = document.getElementsByClassName("box2")[0];box2.onclick = function (event) {event = event || window.event;event.cancelBubble = true;alert("你好！我是box2");}var box1 = document.getElementsByClassName("box1")[0];box1.onclick = function (event) {event = event || window.event;event.cancelBubble = true;alert("你好！我是box1");}} </script>
</head>
<body><div class="box1"><span>我是box1</span><div class="box2"><span>我是box2</span><div class="box3"><span>我是box3</span></div></div></div>
</body>
</html>
案例2
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>事件的委派</title><script>window.onload = function () {// 为每一个超链接都绑定一个单机响应事件函数缺点：// 1、比较繁琐// 2、只能在已有超链接绑定事件，新添加超链接则必须重新绑定// 因此：把单击响应事件，委派给其祖先元素，利用冒泡原理，使得后代元素都能触发事件，这能大大简化代码，提高程序性能。var ul = document.getElementsByTagName("ul")[0];ul.onclick = function (event) {event = event||window.event;// className中 "N" 是大写,link记得带引号。if(event.target.className == "link"){alert("谢谢你的点击！");}}var addA = document.getElementById("addA");addA.onclick = function(){var li = document.createElement("li");// 多重引号冲突时，内部引号变为单引号li.innerHTML = "<a href='javascript:;' class='link''>我是新链接</a>";ul.appendChild(li);}}</script>
</head>
<body><button id="addA">添加新链接</button><ul><li><a href="javascript:;">不跳转链接</a></li><li><a href="javascript:;" class="link">链接一</a></li><li><a href="javascript:;" class="link">链接二</a></li><li><a href="javascript:;" class="link">链接三</a></li></ul>
</body>
</html>