當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件
生活随笔
收集整理的這篇文章主要介紹了
JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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-------");},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 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。
方法二：return false;
阻止事件繼續傳播，事件冒泡和默認行為都被阻止。
總結
以上是生活随笔為你收集整理的JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ffmpeg和免费的录屏软件
- 下一篇： gradle idea java ssm