addEventListener() 方法，监听事件，向一个元素添加多个事件处理程序。
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
事件冒泡
多个元素嵌套并调用同一个事件时，由内部子元素先触发事件，再触发父元素的事件。
<body><div id="box"><button type="button" id="btn">按钮</button></div><script type="text/javascript">var box = document.getElementById("box");var btn = document.getElementById("btn");// 事件冒泡,嵌套元素，子元素先触发，之后触发父元素，以此类推btn.addEventListener("click",function(){console.log("btn-------");});document.addEventListener("click",function(){console.log("document-------");});box.addEventListener("click",function(){console.log("box-------");});//使用外部函数时，嵌套元素，触发事件冒泡/*btn.onclick = function() {console.log("btn-------");}box.onclick = function() {console.log("box-------");}document.onclick = function() {console.log("document-------");}*/</script></body>
事件捕获
多个元素嵌套并调用同一个事件时，由父元素先触发事件，再内部子父元素的事件。
<body><div id="box"><button type="button" id="btn">按钮</button></div><script type="text/javascript">var box = document.getElementById("box");var btn = document.getElementById("btn");// 事件捕获，嵌套元素，父元素先被触发，之后触发子元素，以此类推btn.addEventListener("click",function(){console.log("btn-------");},true);document.addEventListener("click",function(){console.log("document-------");},true);box.addEventListener("click",function(){console.log("box-------");},true);</script></body>
阻止事件冒泡
使用event.stopPropagation()方法，终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
<body><div id="box"><button type="button" id="btn">按钮</button></div><script type="text/javascript">var box = document.getElementById("box");var btn = document.getElementById("btn");btn.addEventListener("click", function(event) {var event = event || window.event; //兼容性处理//跨浏览器的事件对象if (event.stopPropagation) {//阻止事件冒泡event.stopPropagation(); //非IE} else {//阻止事件冒泡event.cancelBubble = true; //IE}console.log("btn-------");});box.addEventListener("click", function() {//未使用event.stopPropagation()方法阻止事件冒泡console.log("box-------");});document.addEventListener("click", function() {console.log("document-------");});</script></body>
取消默认事件
方法一：使用event.preventDefault()方法
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。
<body><a href="/?tn=4801_20_hao_pg&H123Tmp=nunew11" id="a1">a1取消默认事件</a><a href="/?tn=4801_20_hao_pg&H123Tmp=nunew11" id="a2">a2未取消默认事件</a><script type="text/javascript">var a1 = document.getElementById("a1");var a2 = document.getElementById("a2");// 取消默认事件:方法1 event.preventDefault()a1.onclick=function(event){var event = event || window.event; //兼容性处理//跨浏览器的事件对象if(event.preventDefault){// 取消默认事件event.preventDefault(); //非IE}else{// 取消默认事件event.returnValue=false; //IE}console.log("a1-------取消了默认事件");}</script></body>
方法二：return false;
阻止事件继续传播，事件冒泡和默认行为都被阻止。
<body><a href="/?tn=4801_20_hao_pg&H123Tmp=nunew11" id="a1">a1删除</a><a href="/?tn=4801_20_hao_pg&H123Tmp=nunew11" id="a2">a2删除</a><script type="text/javascript">var a1 = document.getElementById("a1");var a2 = document.getElementById("a2");// 取消默认事件:方法2 return falsea1.onclick = function() {console.log("a1-------取消了默认事件");return false; //事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。(阻止事件继续传播，事件冒泡和默认行为都被阻止。)}</script></body>
