javascript
JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件
addEventListener() 方法，監(jiān)聽事件，向一個(gè)元素添加多個(gè)事件處理程序。
第一個(gè)參數(shù)是事件的類型（比如 “click” 或 “mousedown”）。
第二個(gè)參數(shù)是當(dāng)事件發(fā)生時(shí)我們需要調(diào)用的函數(shù)。
第三個(gè)參數(shù)是布爾值，指定使用事件冒泡還是事件捕獲。此參數(shù)是可選的。
事件冒泡
多個(gè)元素嵌套并調(diào)用同一個(gè)事件時(shí)，由內(nèi)部子元素先觸發(fā)事件，再觸發(fā)父元素的事件。
事件捕獲
多個(gè)元素嵌套并調(diào)用同一個(gè)事件時(shí)，由父元素先觸發(fā)事件，再內(nèi)部子父元素的事件。
<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");// 事件捕獲，嵌套元素，父元素先被觸發(fā)，之后觸發(fā)子元素，以此類推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()方法，終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播。
該方法將停止事件的傳播，阻止它被分派到其他 Document 節(jié)點(diǎn)。在事件傳播的任何階段都可以調(diào)用它。注意，雖然該方法不能阻止同一個(gè) Document 節(jié)點(diǎn)上的其他事件句柄被調(diào)用，但是它可以阻止把事件分派到其他節(jié)點(diǎn)。
<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; //兼容性處理//跨瀏覽器的事件對(duì)象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>取消默認(rèn)事件
方法一：使用event.preventDefault()方法
該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作（如果存在這樣的動(dòng)作）。
方法二：return false;
阻止事件繼續(xù)傳播，事件冒泡和默認(rèn)行為都被阻止。
總結(jié)
以上是生活随笔為你收集整理的JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ffmpeg和免费的录屏软件
- 下一篇： java fn replace_JSTL