資訊專欄INFORMATION COLUMN
摘要：歡迎光臨小弟博客我的博客原文中的各種區別小節參考普通添加事件和事件綁定的事件監聽與捕獲和冒泡和的區別
相信大家在DOM的實際開發與學習過程中，肯定也遇到不少需要比較的東西，這里我主要列比較以下幾點，更多的區別和總結，希望想到和遇到的朋友給我留言哦。
clientHeight/scrollHeight/offsetHeight
defer vs async
事件模型-捕獲/目標/冒泡
普通事件 vs 事件綁定
stopPropagation/preventDefault/return false
target/currentTarget
文中示例顯示不是很好，可以直接去小弟博客看原文：DOM中的各種區別小節
各種height/widthCSS盒模型是比較復雜的，尤其是當頁面中有滾動條時，僅僅通過css來操作高度寬度是不夠的，幸運的是Javascript提供了不少這樣的接口。Javascript中clientHeight / cliengWidth， scrollHeight / scrollWidth， offsetHeight / offsetWidth， height / width 都可以獲取高度和寬度，但是他們有一些細微的差別：
See the Pen 各種height/width區別 by superlin (@superlin) on CodePen.
offsetHeight / offsetWidth：可見區域包含border，對于display:block的元素通過width/height + padding + border可以計算出來。
clientHeight / cliengWidth：可見區域包含padding，不包含border和滾動條，不能通過CSS樣式計算出來，取決于滾動條的大小。
scrollHeight / scrollWidth：內容區域的大小，不包含border，包含不在可見區域內的隱藏部分，不能通過CSS樣式計算出來。
height / width：不包含border和padding。
另外：滾動條的寬度可以通過如下方式計算：
javascriptscrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidthdefer與async
一般情況下，能用async就用async，然后是defer，最后才是什么屬性都不帶，主要的規則如下：
如果當前腳本是模塊化的，而且不依賴其他腳本，使用async
如果當前腳本依賴于其他腳本或被其他腳本所依賴，使用defer
如果腳本文件很小，而且被其他async腳本依賴，可以將當前腳本作為內聯腳本放在那些async腳本的前面
事件捕獲與冒泡先來看一個簡單的問題，假設有一個element1元素，里面還有一個element2元素。
----------------------------------- | element1 | | ------------------------- | | |element2 | | | ------------------------- | | | -----------------------------------
這兩個元素都綁定了click事件，如果用戶點擊element2，那個先觸發呢，換句話說事件觸發的的順序是怎樣的呢？
網景公司說element1優先，這叫事件捕獲（event capturing）
微軟則堅持element2優先，這叫事件冒泡（event bubbling）
首先來看看事件捕獲：
| | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 / | | | ------------------------- | | Event CAPTURING | -----------------------------------
可以看出element1上的事件處理函數先觸發，element2上的事件處理函數后觸發。
那么事件冒泡又是怎樣的呢：
/ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | -----------------------------------
這種情況下element2上面的事件處理函數先觸發，element1上面的事件處理函數后觸發。
對于這兩種模型的截然不同，W3C很巧妙地在這場對抗中保持中立：任何W3C事件模型中發生的事件都是先捕獲，直到它到達目標元素，然后再向外冒泡。
| | / -----------------| |--| |----------------- | element1 | | | | | | -------------| |--| |----------- | | |element2 / | | | | | -------------------------------- | | W3C event model | ------------------------------------------
基于事件模型可以有很多應用，最常見的就是事件代理和委托，感興趣的可以深入研究，這里我不在具體描述。
普通事件與事件綁定普通事件就是on+event綁定的事件，Javascript中有很多定義好的事件，例如 onclick， onkeyup， onmouseup 等，這種方式的使用示例如下：
javascriptobj1.onclick = function1; obj1.onclick = function2;
以上的操作下，function1會被function2覆蓋而只執行function2，解除事件只需：
javascriptobj1.onclick = null;
使用支持W3C標準的瀏覽器中綁定事件用的是addEventListener:
javascriptobj1.addEventListener("click",change1,false);
obj1.addEventListener("click",change2,false);
事件執行順序跟綁定順序一樣，先執行change1，再執行change2，解除綁定：
javascriptobj1.removeEventListener("click",change1,false);
在IE里面，綁定事件要用attachEvent:
javascriptobj1.attachEvent("onclick",change1);
obj1.attachEvent("onclick",change2);
綁定時事件名稱同樣要以on為前綴，而且沒有后面是否冒泡的boolean值，但是這種執行順序變成了倒序，先執行change2，再執行change1。 事件取消綁定：
javascriptobj1.detachEvent("onclick",change1);
stopPropagation，preventDefault和return false
因為有父, 子節點同在, 因為有監聽事件和瀏覽器默認動作之分. 使用 JavaScript 時為了達到預期效果經常需要阻止事件和動作執行. 一般我們會用到三種方法, 分別是 stopPropagation(), preventDefault() 和 return false。那么他們有什么區別呢？
See the Pen stopPropagation，preventDefault和return false對比 by superlin (@superlin) on CodePen.
stopPropagation：因為事件可以在各層級的節點中傳遞, 不管是冒泡還是捕獲, 有時我們希望事件在特定節點執行完之后不再傳遞, 可以使用事件對象的 stopPropagation 方法。
preventDefault：元素上帶有的功能. 如: 點擊 a 鏈接節點的跳轉動作, 點擊submit按鈕表單會提交等，如果監聽這些元素的事件時不希望默認動作方式，就可以使用 preventDefault 方法。
return false：退出執行, return false 之后的所有觸發事件和動作都不會被執行. 有時候 return false 可以用來替代 stopPropagation 和 preventDefault，除此之外，還可以返回對象, 跳出循環等。
可以去上面的例子試試哦。
target與currentTargettarget在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的， 而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級），具體示例如下。
See the Pen target與currentTarget區別 by superlin (@superlin) on CodePen.
更多的例子和意見請給我留言。
歡迎光臨小弟博客：Superlin"s Blog
我的博客原文：DOM中的各種區別小節
Understanding offsetWidth, clientWidth, scrollWidth and -Height
Get document height
async vs defer attributes
JS普通添加事件和事件綁定
Event order
javascript的事件監聽與捕獲和冒泡
Bubbling and capturing
stopPropagation, preventDefault 和 return false 的區別
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91492.html
摘要：前言今天和大家一起聊聊的推薦書籍，每一本都是精選，做前端開發的朋友們如果沒讀過，可以嘗試一下。如果怕麻煩，也可以關注曉舟報告，發送獲取書籍，四個字，就可以得到電子書的提取碼。 前言 今天和大家一起聊聊JavaScript的推薦書籍，每一本都是精選，做前端開發的朋友們如果沒讀過，可以嘗試一下。下面給大家簡單介紹了書的內容，還有讀書的方法，希望可以幫大家提升讀書效率。 一、《JavaScr...
摘要：是中的條件指令，根據返回的布爾值動態添加或移除元素。傳值方式我是標題需要在中定義函數傳的值為字符串，不需要前綴傳的值為非字符串數字布爾值函數數組對象，為前綴，值為表達式計算結果在程序中，如引用的值。為該組件內，元素綁定的事件處理函數。 視圖 包含內容#NavigationBar、#TabBar、#MainContext； 為什么#NavigationBar、#TabBar分在Layou...
摘要：本系列文章在實現一個的同時理順框架的主干內容虛擬組件生命周期算法從到實現系列和從到實現系列組件和生命周期先來回顧的生命周期，用流程圖表示如下該流程圖比較清晰地呈現了的生命周期。它們的目的都是降低空間復雜度。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 本系列文章在實現一個 (x)r...
摘要：就是一個用于搭建類似于網頁版知乎這種表單項繁多，且內容需要根據用戶的操作進行修改的網頁版應用。單頁應用程序顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。 最近在逛各大網站，論壇，以及像SegmentFault等編程問答社區，發現Vue.js異常火爆，重復性的提問和內容也很多，樓主自己也趁著這個大前端的熱潮，著手學習了一...
閱讀 1700·2021-11-02 14:47
閱讀 3648·2019-08-30 15:44
閱讀 1334·2019-08-29 16:42
閱讀 1731·2019-08-26 13:53
閱讀 935·2019-08-26 10:41
閱讀 3458·2019-08-23 17:10
閱讀 597·2019-08-23 14:24
閱讀 1717·2019-08-23 11:59
