JS事件、Bom對象和Dom對象（1）（樂字節架構）

時間 2020-07-14

原文原文鏈接

若是你想成爲一名優秀的java架構師，看這裏 → 樂字節免費公開課（騰訊課堂）javascript

如須要跟多資料請點擊右側（記住入羣暗號：66） → 這是一條不歸路，有禿頭風險，請慎重選擇！html

主要內容

事件

事件 (Event) 是 JavaScript 應用跳動的心臟，進行交互，使網頁動起來。當咱們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發生了。事件多是用戶在某些內容上的點擊、鼠標通過某個特定元素或按下鍵盤上的某些按鍵。事件還多是 Web 瀏覽器中發生的事情，好比說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。 java

經過使用 JavaScript ，你能夠監聽特定事件的發生，並規定讓某些事件發生以對這些事件作出響應。瀏覽器

做用

（1）驗證用戶輸入的數據。
（2）增長頁面的動感效果。
（3）加強用戶的體驗度

事件中的幾個名詞

事件源: 誰觸發的事件
事件名: 觸發了什麼事件
事件監聽: 誰管這個事情，誰監視？
事件處理:發生了怎麼辦

例如架構

闖紅燈     事件源:車 ;   事件名: 闖紅燈;    監聽：攝像頭、交警 ;     處理:扣分罰款 
單擊按鈕   事件源:按鈕;   事件名: 單擊;     監聽:窗口 ;             處理:執行函數

當咱們用戶在頁面中進行的點擊動做，鼠標移動的動做，網頁頁面加載完成的動做等，均可以稱之爲事件名稱，即：click、mousemove、load 等都是事件名稱，具體的執行代碼處理，響應某個事件的函數。ide

<body onload="loadWindow();"></body>
<script>
    function loadWindow(){
        alert("加載窗體");
    }
</script>

事件類型

JavaScript能夠處理的事件類型爲：鼠標事件、鍵盤事件、HTML事件。函數

<http://www.w3school.com.cn/tags/html_ref_eventattributes.asp>; 用+查code

Window 事件屬性：針對 window 對象觸發的事件（應用到 <body> 標籤） orm

Form 事件：由 HTML 表單內的動做觸發的事件（應用到幾乎全部 HTML 元素，但最經常使用在 form 元素中）視頻

Keyboard 事件 : 鍵盤事件

Mouse 事件：由鼠標或相似用戶動做觸發的事件

Media 事件：由媒介（好比視頻、圖像和音頻）觸發的事件（適用於全部 HTML 元素，但常見於媒介元素中，好比 <audio>、<embed>、<img>、<object> 以及 <video>）

幾個經常使用的事件：

<font color="red">onclick 、onblur 、onfocus 、onload 、onchange</font>

<font color="red">onmouseover、onmouseout、onkeyup、onkeydown</font>

onload：當頁面或圖像加載完後當即觸發

onblur：元素失去焦點

onfocus：元素得到焦點

onclick：鼠標點擊某個對象

onchange：用戶改變域的內容

onmouseover：鼠標移動到某個元素上

onmouseout：鼠標從某個元素上離開

onkeyup：某個鍵盤的鍵被鬆開

onkeydown：某個鍵盤的鍵被按下

事件流和事件模型

咱們的事件最後都有一個特定的事件源，暫且將事件源看作是HTML的某個元素，那麼當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間按特定的順序傳播，路徑所通過的節點都會受到該事件，這個傳播過程稱爲DOM事件流。

事件順序有兩種類型：事件捕獲 和 事件冒泡。

冒泡和捕獲其實都是事件流的不一樣表現，這二者的產生是由於IE和Netscape兩個大公司徹底不一樣的事件流概念產生的。（事件流：是指頁面接受事件的順序）IE的事件流是事件冒泡，Netscape的事件流是事件捕獲流。

事件冒泡

IE的事件流叫作事件冒泡，即事件開始時由最具體的元素接受，而後逐級向上傳播到較爲不具體的節點（文檔）。例以下面的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
    </head>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

若是點擊了頁面中的<div>元素，那麼這個click事件會按照以下順序傳播：

一、<div>

二、<body>

三、<html>

四、document

也就是說，click事件首先在div元素上發生，而這個元素就是咱們單擊的元素。而後，click事件沿DOM樹向上傳播，在每一級節點上都會發生，直到傳播到document對象。

全部現代瀏覽器都支持事件冒泡，但在具體實現上仍是有一些差異。

事件捕獲

Netscape提出的另外一種事件流叫作事件捕獲，事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預約目標以前捕獲它。還之前面的例子爲例。那麼單擊<div>元素就會按下列順序觸發click事件：

一、document

二、<html>

三、<body>

四、<div>

在事件捕獲過程當中，document對象首先接收到click事件，而後沿DOM樹依次向下，一直傳播到事件的實際目標，即<div>元素。

雖然事件捕獲是Netscape惟一支持的事件流模式，但不少主流瀏覽器目前也都支持這種事件流模型。儘管「DOM2級事件」規範要求事件應該從document對象開始時傳播，但這些瀏覽器都是從window對象開始捕獲的。

DOM 事件流

「DOM2級事件」規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲階段，爲截獲事件提供了機會。而後是實際的目標接收到事件。最後一個階段是冒泡階段，能夠在這個階段對事件作出響應。

事件處理程序

事件就是用戶或瀏覽器自身執行的某種動做。例如click、load和mouseover都是事件的名字，而響應某個事件的函數就叫作事件處理程序（或事件偵聽器）。事件處理程序的名字以「on」開頭，所以click事件的事件處理程序就是onclick，爲事件指定處理程序的方式有好幾種。

HTML 事件處理程序

某個元素支持的每種事件，均可以用一個與相應事件處理程序同名的HTML特性來指定。這個特性的值應該是可以執行的JavaScript代碼：

<input type="button" value="Press me" onclick="alert('thanks');" />

這樣作有一些缺點，例如耦合度太高，還可能存在時差問題（當用戶點擊按鈕時，處理函數還未加載到，此時處理函數是單獨寫的一段js代碼），並且在不一樣的瀏覽器上可能會有不一樣的效果。

DOM0 級事件處理程序

經過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。這種方式被全部現代瀏覽器所支持。這種方式首先必須取得一個要操做的對象的引用，每一個元素都有本身的事件處理程序屬性，這些屬性一般全都小寫，例如onclick，而後將這種屬性的值設爲一個函數，就能夠指定事件處理程序了。例如：

<body>
    <button id="myBtn">按鈕</button>
    <script type="text/javascript">
        var btn = document.getElementById('myBtn');
        btn.onclick = function(){
            console.log('you click a button');
        }
    </script>
</body>

以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。並且，只能爲同一個元素的同一個事件設定一個處理程序（覆蓋），也能夠經過刪除DOM0級方法指定的事件處理程序，只要將屬性值設爲null便可：

btn.onclick = null;

DOM2 級事件處理程序

「DOM2級事件」定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener()。全部DOM節點都包含這兩個方法，而且他們都接受3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是true，則表示在捕獲階段調用事件處理程序；若是是false則表示在冒泡階段調用事件處理程序。

<body>
    <button id="myBtn">按鈕</button>
    <script type="text/javascript">
        var btn = document.getElementById('myBtn')
        btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2')
        },false)

        btn.addEventListener('click',function(){
            alert('you add a eventListener by DOM2 again')
        },false)

        function thread(){
            alert('you add a eventListener by DOM2 第三次')
        }
        btn.addEventListener('click',thread,false)
        btn.removeEventListener('click',thread,false)
    </script>
</body>

thread(){
alert('you add a eventListener by DOM2 第三次')
}
btn.addEventListener('click',thread,false)
btn.removeEventListener('click',thread,false)
</script>
</body>

   這種方式能夠爲同一個元素的同一個事件添加多個處理函數。還可刪除事件處理函數，注意，在刪除的時候，不能刪除匿名處理函數。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。