1、 阻止冒泡
w3c的方法是e.stopPropagation()，IE則是使用e.cancelBubble = true
// 設置的時候設爲捕獲
element.addEventListener(event, function, useCapture)
useCapture默認是false，冒泡階段。
2、如何改變默認行爲
preventDefault它是事件對象(Event)的一個方法，作用是取消一個目標元素的默認行爲。
元素必須有默認行爲才能被取消，如果元素本身就沒有默認行爲，調用當然就無效了。
w3c的方法是e.preventDefault()，IE則是使用e.returnValue = false;
e.preventDefault ? e.preventDefault() : window.event.returnValue == false;
原生javascript的 return false只會阻止默認行爲.
a.onclick = function(){
return false;
};
用jQuery的話則既阻止默認行爲又防止對象冒泡。
$("#testC").on('click',function(){
return false;
});
什麼元素有默認行爲呢？
如鏈接<a>，總會跳到一個新頁面，有時只是要執行js代碼，並不用跳轉，這時就要阻止默認行爲。
提交按鈕<input type=”submit”> 默認行爲提交表單、radio(checkBox點擊(選中)之後出現對勾，這是它的默認行爲)等表單元素的默認事件 。
當Event 對象的cancelable爲false時，表示沒有默認行爲,這時即使有默認行爲，調用preventDefault也是不會起作用的。
//原生js阻止瀏覽器的默認行爲
function stopDefault( e ) {
//阻止默認瀏覽器動作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
}else{
//IE中阻止函數器默認動作的方式
window.event.returnValue = false;
}
return false;
}
舉例
<a>消除默認事件的方法
<a href="http://www.baidu.com" onclick="clickEle(this)">使用stopPropagation！</a>
<a href=http://www.baidu.com" οnclick="alert(123);return false">使用return false！</a>
<a href="javascript:void(0);">void(0)使地址不發生跳轉，不寫void(0)也可以使返回爲undefined！</a>
<a href="#">#會導致每次點擊頁面移到最頂部！</a>
function clickEle(e) {
if (e && e.preventDefault) {
console.log('阻止默認事件w3c');
e.preventDefault();
} else {
//我用谷歌瀏覽器執行的是這個，e.preventDefault是undefined？
console.log('阻止默認事件ie');
window.event.returnValue = false;
}
return false;
}
3、說說行內元素和塊級元素
竟然是靠盒子模型來區分，就是設置上下margin，padding無效的就是行內元素。
塊級元素對應於display:block. 行內元素對應於display:inline.
4、repaint和reflow什麼時候發生
5、當瀏覽器頁面變小時，會發生repaint和reflow嗎？
如果寫死了寬高就不會變化，如果沒寫死，整個頁面就會發生repaint和reflow。
6、dom和bom區別
7、提高頁面加載速度的辦法
- 減小頁面大小
頁面的肥瘦是影響加載速度最重要的因素
- 去除不必要的空格、回車、註釋。
- 將內聯的 css 和 js 移到外部文件
- 頁面壓縮工具對頁面進行壓縮，比如：webpack集成的UglifyJS插件，uglifyJsPlugin會拖慢webpack的編譯速度，所有建議在開發階段將其關閉，部署的時候再將其打開。
- 減少文件數量
減少頁面上引用的文件數量可以減少HTTP連接數。
許多JavaScript、CSS 文件可以合併最好合併成一個js 或者 css。
- 減少域名查詢
DNS查詢和解析域名也是消耗時間的，所以要減少對第三方JavaScript、
CSS、圖片等資源的引用，不同域名的使用越少越好。
比如：
引用jqury的兩種方式
1 下載代碼文件至本地項目中，引入。
2 通過 CDN（內容分發網絡） 引用它
其他的包最好用1方式下載，這樣減少DNS解析域名的時間。
但jqury用使用CDN引用的一個好處：許多用戶在訪問其他站點時，已經從百度、又拍雲、新浪、谷歌或微軟加載過 jQuery。
所有結果是，當他們訪問您的站點時，會從緩存中加載 jQuery，這樣可以減少加載時間。
同時，大多數 CDN 都可以確保當用戶向其請求文件時，會從離用戶最近的服務器上返回響應，這樣也可以提高加載速度。
- 緩存重用數據
對重複使用的數據進行緩存。
- 優化頁面元素加載順序
首先加載頁面最初顯示的內容和與之相關的JavaScript和CSS，然後加載HTML相關的東西，
像什麼不是最初顯示相關的圖片、flash、視頻等很肥的資源就最後加載。
js放在body的最後面，減少減少inline JavaScript的數量，瀏覽器parser會假設
inline JavaScript會改變頁面結構，所以使用inline JavaScript開銷較大。
6、指定圖像和table的大小
a. 如果瀏覽器可以立即決定圖像或table的大小，那麼它就可以馬上顯示頁面而不要重新做一些佈局安排的工作。
b. 這不僅加快了頁面的顯示，也預防了頁面完成加載後佈局的一些不當的改變。
c. image使用height和width。
8、獲取鼠標位置
event.clientX / event.clientY
pc端使用mousedown,mousemove,mouseup監聽實現。
移動端的方法是touchstart,touchmove,touchend。
移動端獲取clientx：
event.changedTouches[0].clientX
獲取位置總結
clientX / clientY : 觸摸點相對於瀏覽器視口的位置，（不包含滾動距離）
pageX / pageY : 觸摸點相對於頁面的位置，（包含滾動距離）
screenX / screenY : 觸摸點相對於屏幕的位置
JS之clientX,clientY,screenX,screenY,offsetX,offsetY區別測試
event中的幾個屬性：
clientX,clientY：鼠標相對於瀏覽器視口的x，y軸的位置
pageX / pageY： 鼠標相對於頁面的x，y軸的位置，當頁面沒滾動時，pagexy和clientxy的值是相等的
screenX,screenY：鼠標相對於整個屏幕的x，y軸的位置
offsetX,offsetY：鼠標相對於事件源x軸的位置。
比如有個按鈕，當你點擊時，offsetX,offsetY獲取的就是鼠標相對這個按鈕的x座標和y座標
9、html分類
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<br>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
按是否閉合分劃分：
閉合標籤：
閉合標籤是指由開始標籤和結束標籤組成的一對標籤，
這種標籤允許嵌套和承載內容，例如<html></html>、<p></p>等。
空標籤：
空標籤是指沒有內容的標籤，在開始標籤中自動閉合。
常見的空標籤有：<br>、<hr>、 <img>、 <input>、 <link> <meta>。
塊級元素和行內元素的區別？
1.inline元素設置width，height屬性無效
2.inline元素的padding和margin可以設置，
但是padding，margin-right，margin-left都產生了效果，
而垂直方向的margin-bottom，margin-top是沒有效果的
（親測padding-top和padding-bootom是有用的
inline-block：結合了塊級元素和行內元素的特性，塊級元素排在一行）