1.事宜綁定
要領1 - 直接綁定
var btn = document.getElementById('btn1')
btn.addEventListener('click',function(event){
console.log('clicked')
})
要領2 - 封裝函數挪用
function bindEvent(elem, type, fn){
elem.addEventListener(type, fn) //addEventListener 綁定事宜
}
var a = document.getElementById('link1')
bindEvent(a,'click',function(e){
e.preventDefault() //阻撓默許行動（例：a標籤點擊跳轉）
alert（'clicked'）
})
IE低版本綁定事宜兼容題目：
不辨認addEventListener要領，改用attachEvent綁定事宜，和W3C規範不一樣2.事宜冒泡
HTML部份：
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">作廢</p>
</div>
<div id="div2">
<p id="p3">作廢</p>
<p id="p4">作廢</p>
</div>
</body>
JS部份：
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1,'click',function(e){
e.stopPropagation() //阻撓（往上）冒泡
alert('激活')
})
bindEvent(body,'click',function(e){
alert('作廢')
})
事宜冒泡機制：順着DOM數據構造底層恭弘=叶 恭弘子結點一個點擊事宜，會一層一層依據這個樹形構造，往父元素去觸發3.代辦（冒泡的運用）
HTML部份：
<div id="div1">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<!--隨時增添更多 a 標籤-->
</div>
JS部份：
計劃1 - 為每個a都綁定上事宜（新增時沒法綁定）：
var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
var target = e.target //獵取點擊從哪觸發
if(target.nodeName === 'A'){
alert(target.innerHTML)
}
})
計劃2 - 將事宜綁定到父元素上
學問補充：
通用事宜綁定（用一個函數把基礎事宜綁定劃定規矩都封裝起來）：
function bindEvent(elem, type, selector, fn){
if(fn == null){
fn = selector //selector 選擇器是字符串，有代辦
selector = null
}
elem.addEventListener(type, function(e){
var target
if(selector){
target = e.target //拿到實在觸發
if(target.matches(selector)){ //是不是婚配
fn.call(target, e)
}
}else{
fn(e)
}
})
}
函數挪用 - 運用代辦：
var div1 = document.getElementById('div1')
bindEvent(div1,'click','a',function(e){
console.log(this.innerHTML)
})
不運用代辦：
var a = document.getElementById('a1')
bindEvent(div1,'click',function(e){
console.log(a.innerHTML)
})代辦的長處：
1、代碼簡約
2、削減瀏覽器內存佔用
4.ajax
XMLHttpRequest（函數）：
var xhr = new XMLHttpRequest()
xhr.open('GET','途徑', true) //true代表能夠異步實行
xhr.onreadystatechange = function(){ //這裡是一個異步的函數
if(xhr.readyState == 4){ //狀況碼（對象隨時監聽狀況變化）
if(xhr.status == 200){ //服務端返回的狀況碼
alert(xhr.responseText)
}
}
}
xhr.send(null)
IE低版本兼容性題目：
運用ActiveXObject，與W3C規範差別學問補充：
readystate：
0：未初始化，還未挪用send要領
1：載入，已挪用send要領，正在發送要求
2：載入完成，send要領實行終了，已獲得一切返回內容
3：交互，正在剖析相應內容
4：完成，相應內容剖析完成，能夠在客戶端挪用了（經常使用）
http規範碼 status：
2xx：要求勝利
3xx：重定向，瀏覽器跳轉
4xx：客戶端要求毛病、404找不到頁面
5xx：服務器毛病、銜接數據庫超時5.跨域：
跨域：瀏覽器有同源戰略的限定，不許可ajax接見其他域的接口
（要求必需經由信息供應方許可）
跨域前提： 協定，域名，端口，有一個差別就算跨域（http：默許端口80 ，https：默許443）
跨域的注意事項: (1)一切的跨域要求都必需經由信息供應方的許可 (2)如果味許可即可獵取，那就是瀏覽器的同源戰略湧現了題目
可跨域的三個標籤：
(1) <img src = xxx>
img用於辦理統計，統計網站多是其他域
(img沒有兼容性題目，但有一個題目，圖片的供應方供應了防盜鏈就會接見失利）
(2) <link src = xxx>
link script 能夠運用CDN CDN能夠是其他域
(3) <script src = xxx>
script能夠用於JSONP
JSONP
windoe.callback= function(data){} //獵取服務器返回的數據 data
完成道理:
1、加載一個網址 http：//demo/index.html
2、服務器端不一定真的須要有一個index.html文件
3、服務器能夠依據要求動態天生一個文件返回（即服務器端成成的內容能夠動態天生）
CROS：服務器端設置http Header
6.存儲：
cookie
cookie：用於瀏覽器和服務器端通訊的，由於有當地存儲功用，被‘借用’)
document.cookie = ”“ //獵取、修正
瑕玷：
(1) 內存小，僅4kb
(2) 由於通訊，一切http要求都帶着（會影響獵取資本的效力）
(3) API簡樸，須要封裝
localStorage（經常使用）和 sessionStorage
長處：
(1) HTML5特地用存儲而設想，最大容量5M，不必在要求中帶着
(2) API簡約易用 (localStorage.setItem(key,value)、localStorage.getItem(key)、removeItem)
注意事項：
IOS safari 隱蔽形式下，localStorage.getItem() 會報錯，發起用 try-catch 封裝一下
cookie 與 webStorage 區分：
（1）容量
（2）是不是會攜帶到 ajax 中
（3）API易用性