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