javascript -- 事件--事件流-- 冒泡 --捕獲

leeon 發布于2019-08-26 11:38 / 2687人閱讀

摘要：在內聯模型中，事件處理函數是標簽的一個屬性，用于處理指定事件。事件捕獲與冒泡原理圖事件流同時支持兩種事件模型捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。

javascript -- 事件

事件是js和用戶操作交互的橋梁,

JavaScript 有三種事件模型：內聯模型、腳本模型和 DOM2 模型

內聯模型

這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是 HTML 標簽的一個屬性，用于處理指定事件。雖然內聯在早期使用較多，但它是和 HTML 混寫的，并沒有與 HTML 分離。

//在 HTML 中把事件處理函數作為屬性執行 JS 代碼
     //注意單雙引號

腳本模型

由于內聯模型違反了 HTML 與 JavaScript 代碼層次分離的原則。為了解決這個問題，我
們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型。

    var input = document.getElementsByTagName("input")[0]; //得到 input 對象
    input.onclick = function () { //匿名函數執行
    alert("Lee");
    };

直接接收 event 對象，是 W3C 的做法，IE 不支持，IE 自己定義了一個 event 對象，直接在 window.event 獲取即可。

    div.onclick = function (evt) {
    var e = evt || window.event; //實現跨瀏覽器兼容獲取 event 對象
    if(evt){
        //w3c代碼
    } else if (window.event) {
        //ie代碼
    }
        
    };

DOM2 級

模型定義了兩個方法，用于添加事件和刪除事件處理程序的操作：
addEventListener()和 removeEventListener()所有 DOM 節點中都包含這兩個方法，并且它們都接受 3 個參數；事件名、函數、冒泡或捕獲的布爾值(true 表示捕獲，false 表示冒泡)。

    div.addEventListener("click", function () {
    alert("Lee");
    }, false);
    div.addEventListener("click", function () {
    alert("Mr.Lee");
    }, false);

捕獲與冒泡

事件流分為2種:
(1) 冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發
(2) 捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)

支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，還是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等于false的時候執行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。

js事件捕獲與冒泡原理圖

DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

W3c明智的在這場爭斗中選擇了一個擇中的方案。任何發生在w3c事件模型中的事件，首是進入捕獲階段，直到達到目標元素，再進入冒泡階段

你可以選擇是在捕獲階段還是冒泡階段綁定事件處理函數，這是通過addEventListener()方法實現的，如果這個函數的最后一個參數是true，則在捕獲階段綁定函數，反之false(默認)，在冒泡階段綁定函數。

當然IE作為前端程序員的口誅筆伐者自然如上面所說只支持冒泡階段執行, 然而令人高興的是從IE9 微軟擁抱 w3c 隨著谷歌的崛起 chrome已經站到瀏覽器的半壁江山, IE678 逐步走出歷史, 無疑給是前端開發的福音

云服務器 GPU云服務器 javascript事件流冒泡事件事件冒泡事件冒泡機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107294.html

javascript 事件流捕獲與冒泡

摘要：捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行，事件是可以被 JavaScript 偵測到的行為綁定事件首先我們要先綁定事件綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...

DC_er 2019-08-22 18:49 評論0 收藏0
javascript 事件流捕獲與冒泡

摘要：捕獲型事件流事件的傳播是從最不特定的事件目標到最特定的事件目標。鼠標移入元素范圍內觸發，該事件不冒泡，即鼠標移到其后代元素上時不會觸發。事件通常與函數配合使用，這樣就可以通過發生的事件來驅動函數執行，事件是可以被 JavaScript 偵測到的行為綁定事件首先我們要先綁定事件綁定事件有三種 1）在DOM元素中直接綁定，我們可以在DOM元素上綁定onclick、onmouseov...

aboutU 2019-08-30 15:54 評論0 收藏0
JavaScript-淺談DOM事件流

摘要：事件流指的是從頁面接收事件的順序。級事件規定方法的第三個參數設為，表示事件在捕獲階段觸發。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據級事件規定，事件流應該包括三個階段，事件捕獲階段，處于目標階段和事件冒泡階段。什么是事件？（敲黑板）事件，就是文檔或瀏覽器窗口發生的一些特定的交互瞬間。（by 《JavaScript高級程序設計》）比如鼠標點擊，雙擊，滾動條滑動... 什么是事件...

haitiancoder 2019-08-20 10:49 評論0 收藏0
理解DOM事件流的三個階段

摘要：本文主要解決兩個問題什么是事件流事件流的三個階段起因在學習前端的大半年來，對事件了解甚少。事件流所描述的就是從頁面中接受事件的順序。事件流事件流包括三個階段。防止事件冒泡而帶來不必要的錯誤和困擾。分有事件冒泡與事件捕獲兩種。本文主要解決兩個問題：什么是事件流 DOM事件流的三個階段起因在學習前端的大半年來，對DOM事件了解甚少。一般也只是用用onclick來綁定個點擊事件。...

xiangzhihong 2019-08-19 17:38 評論0 收藏0