<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td><span>冒泡事件測試1</span></td>
<td><span>冒泡事件測試2</span></td>
</tr>
</table>
</body>
<a >測試</a>
<script src="./js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--
1.<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
2.<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
3.<script defer src="myscript.js"></script>
有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
-->
<script type="text/javascript" charset="utf-8">
// $('table').on('click',function(e){
// alert('table alert!');
// });
// $('tr').on('click',function(e){
// alert('tr alert');
// });
//? ? $('span').on('click',function(e){
//? ? alert('span alert');
//? ? });
? ? // span alert -> td alert -> table alert。這就叫事件冒泡。就是從下到上，從里到外，事件依次觸發(fā)。
? ? $(function(){
? ? return false? //return false等效于同時(shí)調(diào)用e.preventDefault()和e.stopPropagation(),從源碼中可以看到該功能的實(shí)現(xiàn)。
$('table').on('click','span',function(e){? ??
//個(gè)人理解是禁止該元素的子元素到該元素的事件冒泡。
? ? alert('span alert');
? ? e.stopPropagation();
? ? });
? ? $('tr').on('click','span',function(e){
? ? alert('span alert');
? ? e.stopPropagation();
? ? });
? ? $('table').on('click',function(){
? ? alert('table alert!')
? ? });
? ? $('tr').on('click',function(){
? ? alert('table alert!')
? ? });
? ? })
? ? // 點(diǎn)擊span時(shí)，彈出"span alert!"對(duì)話框即結(jié)束，然后禁止事件冒泡，“table alert!”對(duì)話框即不會(huì)觸發(fā)。
? ? $("a").click(function (e) {
? ? alert("默認(rèn)行為被禁止嘍");
? ? return false
? ? // e.preventDefault();? //阻止默認(rèn)事件，就是停止元素原本的功能
});
</script>
</html>
