2. 程式人生 > >事件冒泡和事件捕獲

事件冒泡和事件捕獲

阿新 • • 發佈：2018-09-07
pad http eve class click true blue on() 寫法

事件冒泡有空補充（印象筆記裏）

事件捕獲

瀏覽器默認，由裏向外逐漸觸發事件，這種行為叫做事件冒泡。

利用事件監聽可以使瀏覽器，由外向裏逐漸觸發事件，這種行為叫做事件捕獲。

事件流：
事件冒泡，由裏向外逐漸觸發事件。
事件捕獲，由外向裏逐漸觸發事件。

代碼示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件捕獲</title>
        <style>
            div{padding: 50px}
            #div1{background
 
-color: red}
            #div2{background-color: blue}
            #div3{background-color: orange}
        </style>
        <script>
            window.onload = function(){
                var aDivs = document.getElementsByTagName(‘div‘);
                for(var i = 0; i < aDivs.length; i++){
                    
 
//通過事件監聽的方式添加事件就會 看到的現象就會和事件冒泡的方向相反
                    aDivs[i].addEventListener("click", function(){
                        alert(this.id);
                    }, true);
                }

                /*
                    事件冒泡的瀏覽器兼容寫法
                 */
/*
                function stopBubble(e){
                    if(e.cancelBubble){
                        e.cancelBubble = true;
                    }else{
                        e.stopPropagation();
                    }
                }

 
*/

                /*
                    阻止事件冒泡


                 */
            }
            /*
                上述的行為是瀏覽器的默認行為。
                瀏覽器默認，由裏向外逐漸觸發事件，這種行為叫做事件冒泡。

                事件流：
                事件冒泡，由裏向外逐漸觸發事件。
                事件捕獲，由外向裏逐漸觸發事件。

             */
        </script>
    </head>
    <body>
        <div id = ‘div1‘>
            <div id = ‘div2‘>
                <div id = ‘div3‘></div>
            </div>
        </div>
    </body>
</html>

瀏覽器效果：

技術分享圖片

事件冒泡和事件捕獲

相關推薦

關於事件流，事件冒泡和事件捕獲

有意 clas 向上 接收 上傳 單擊事件 sca dom 描述 1.事件流 假設有這樣一個場景： 有一個導航條：div > ul > li > a，每個元素塊寬高一樣，就像是一組同心圓。如果我們點擊a元素，那麽瀏覽器會認為單擊事件不僅僅發生在a上。換

js的事件冒泡和事件捕獲

use 應用 ges color mouse 冒泡 code 元素事件 三個參數 一、定義 事件捕獲：從document到觸發事件的那個節點，自上而下觸發事件； 事件冒泡：從觸發事件節點依次向上觸發事件，直到document。 原聲js中，綁定事件方法addEventLis

js之事件冒泡和事件捕獲詳細介紹

1-1 ppr lang strong 傳播 默認 ont 也不會 element （1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。 IE 5.5: div -> body -> document

JS事件冒泡和事件捕獲

border 綁定 tab 現在 cells 一次 tel 加載 adding 他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發

DOM事件機制(事件捕獲和事件冒泡和事件委托)

使用 tar web strong 事件 所有 span click ner 內容： 1.事件復習 2.事件冒泡與事件捕獲 3.事件委托 1.事件復習 (1)事件 事件是用來處理響應的一個機制，這個響應可以來自於用戶(點擊, 鼠標移動, 滾動), 也可以來自於瀏

事件冒泡和事件捕獲

pad http eve class click true blue on() 寫法 事件冒泡有空補充（印象筆記裏） 事件捕獲 瀏覽器默認，由裏向外逐漸觸發事件，這種行為叫做事件冒泡。 利用事件監聽可以使瀏覽器，由外向裏逐漸觸發事件，這種行為叫做事件捕獲。

事件流：事件冒泡和事件捕獲

top 選擇器 itl listener doc 三個參數 NPU 默認 捕獲 事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,fu

事件，事件冒泡和事件捕獲

1.事件 瀏覽器客戶端上客戶觸發的行為都稱為事件 所有的事件都是天生自帶的，不需要我們去繫結，只需要我們去觸發。 通過obj.事件名=function(){} 事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick&n

JS高階：事件冒泡和事件捕獲；

1、事件：瀏覽器客戶端上客戶觸發的行為成為時事件；所有的事件都是天生自帶的，不需要我們去繫結，只需要我們去觸發 當用戶觸發一個事件時，瀏覽器的所有詳細資訊都存在一個叫做event的物件上，我們把它叫做事件物件 2、獲取滑鼠的座標 event.clientX;event.clientY document

【事件流】事件冒泡和事件捕獲

事件流： 　　通俗的說就是：元素觸發時，傳播的過程。   冒泡型事件流：事件的傳播是從最具體的事件目標到最不具體的事件目標。即從DOM樹的葉子到根。 　　　　　　　<div>—》<body>—》<html>—》document &n

JS中的事件冒泡和事件捕獲

談起JavaScript的 事件，事件冒泡、事件捕獲、阻止預設事件這三個話題，無論是面試還是在平時的工作中，都很難避免。 事件捕獲階段：事件從最上一級標籤開始往下查詢，直到捕獲到事件目標(target

事件流：事件冒泡和事件捕獲的理解

事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,function(),false); 事件冒泡是自下而上的去觸發

JavaScript——事件流（事件冒泡和事件捕獲）

1、事件流 當瀏覽器發展到第4代時，瀏覽器開發團隊遇到了一個問題：頁面中的哪個元素會擁有某個特定的事件？當你單擊某個按鈕時，顯然該單擊事件並不僅僅發生在按鈕上，它還發生在按鈕的所有祖先元素上，比如按鈕的容器元素，容器元素的父元素，甚至整個頁面document。但是，哪個元素

徹底弄懂JS的事件冒泡和事件捕獲

事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標籤。 假設一個元素div，它有一個下級元素p。 <div> 　　<p>元素</p> </div> 這兩個元素都綁定了click事件，如果使用者點

終於弄懂了事件冒泡和事件捕獲！

總結了兩個人的部落格，寫了這篇：總算是搞清楚事件捕獲和事件冒泡了！ 參考資料淺談事件冒泡與事件捕獲 理解事件捕獲和事件冒泡 1、事件捕獲 捕獲型事件(event capturing)：事件從最不精確的物件(document 物件)開始觸發，然後到最精確(也可以在視窗級別

JS事件流（事件冒泡和事件捕獲）

事件流是描述從頁面接收事件的順序。但是有意思的是，IE和Netscape開發團隊提出了差不多完全相反的事件流概念。IE的事件流是事件冒泡流，而Netspace Communicator的事件流是事件捕獲流。 事件冒泡 IE的事件流叫做事件冒泡（event

js 事件流的事件冒泡和事件捕獲與阻止事件傳播

head 阻止事件冒泡 觸發 事件冒泡 單擊 期望 就會 簡單的 出現異常 為了方便引入事件流的概念，我們先來說說什麽是事件。 事件就是用戶或瀏覽器自身執行的某種動作。換句話說，我們在瀏覽網頁或者 APP 時，通常會在設備上產生很多交互性的操作，例如點擊、選擇、滾動屏幕、鍵

JS 事件冒泡和事件捕獲

寫在前面 W3C規定DOM事件流（event flow ）存在三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。dom標準事件流的觸發的先後順序為：先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之後通過事件傳播進行事件冒泡。 對事件冒泡和捕捉的解釋 事件冒泡 在本示例中，當我們點選孫

阻止事件冒泡和事件默認行為

pre function 防止 處理 true 停止 jquery 事件 val 阻止事件冒泡（兼容IE8） function stopHandler(event){ window.event?window.event.cancelBubble=true:even

JavaScript 事件冒泡和事件捕捉

含義 事件冒泡 事件的觸發順序為，由內而外。直到文件最頂層（document或window）。 事件捕捉 事件的觸發順序為，由外而內。 任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段。 //使用事件捕捉模式 element1.