<!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 href="http://www.baidu.com">测试</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，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
2.<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
3.<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
-->
<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。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。
$(function(){
return false //return false等效于同时调用e.preventDefault()和e.stopPropagation(),从源码中可以看到该功能的实现。
$('table').on('click','span',function(e){
//个人理解是禁止该元素的子元素到该元素的事件冒泡。
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!')
});
})
// 点击span时，弹出"span alert!"对话框即结束，然后禁止事件冒泡，“table alert!”对话框即不会触发。
$("a").click(function (e) {
alert("默认行为被禁止喽");
return false
// e.preventDefault(); //阻止默认事件，就是停止元素原本的功能
});
</script>
</html>