摘要：事件綁定方法直接綁定方法封裝函數(shù)調(diào)用綁定事件阻止默認(rèn)行為例標(biāo)簽點(diǎn)擊跳轉(zhuǎn)低版本綁定事件兼容問(wèn)題不識(shí)別方法，改用綁定事件，和標(biāo)準(zhǔn)不一樣事件冒泡部分激活取消取消取消部分阻止往上冒泡激活取消事件冒泡機(jī)制順著數(shù)據(jù)結(jié)構(gòu)底層葉子結(jié)點(diǎn)一個(gè)點(diǎn)擊事件，會(huì)一

1.事件綁定

方法1 - 直接綁定
var btn = document.getElementById("btn1")
btn.addEventListener("click",function(event){
    console.log("clicked")
})

方法2 - 封裝函數(shù)調(diào)用
function bindEvent(elem, type, fn){
    elem.addEventListener(type, fn) //addEventListener 綁定事件
}

var a = document.getElementById("link1")
bindEvent(a,"click",function(e){
    e.preventDefault() //阻止默認(rèn)行為（例：a標(biāo)簽點(diǎn)擊跳轉(zhuǎn)）
    alert（"clicked"）
})

IE低版本綁定事件兼容問(wèn)題：
不識(shí)別addEventListener方法，改用attachEvent綁定事件，和W3C標(biāo)準(zhǔn)不一樣

2.事件冒泡

HTML部分：

    

        
激活
        
取消
    
    

        
取消
        
取消
    


JS部分：
var p1 = document.getElementById("p1")
var body = document.body
bindEvent(p1,"click",function(e){
    e.stopPropagation() //阻止（往上）冒泡
    alert("激活")
})
bindEvent(body,"click",function(e){
    alert("取消")
})

事件冒泡機(jī)制：順著DOM數(shù)據(jù)結(jié)構(gòu)底層葉子結(jié)點(diǎn)一個(gè)點(diǎn)擊事件，會(huì)一層一層根據(jù)這個(gè)樹(shù)形結(jié)構(gòu)，往父元素去觸發(fā)

3.代理（冒泡的應(yīng)用）

HTML部分：

    
    
    
    


JS部分：
方案1 - 為每一個(gè)a都綁定上事件（新增時(shí)無(wú)法綁定）：
    var div1 = document.getElementById("div1")
    div1.addEventListener("click",function(e){
        var target = e.target //獲取點(diǎn)擊從哪觸發(fā)
        if(target.nodeName === "A"){
            alert(target.innerHTML)
        }
    })
    
方案2 - 將事件綁定到父元素上

知識(shí)補(bǔ)充：

通用事件綁定（用一個(gè)函數(shù)把基本事件綁定規(guī)則都封裝起來(lái)）：

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 //拿到真實(shí)觸發(fā)
            if(target.matches(selector)){ //是否匹配
                fn.call(target, e)
            }
        }else{
            fn(e)
        }
    })
}
   
函數(shù)調(diào)用 - 使用代理：
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、代碼簡(jiǎn)潔 
2、減少瀏覽器內(nèi)存占用

4.ajax

XMLHttpRequest（函數(shù)）：

var xhr = new XMLHttpRequest()
xhr.open("GET","路徑", true) //true代表可以異步執(zhí)行
xhr.onreadystatechange = function(){ //這里是一個(gè)異步的函數(shù)
    if(xhr.readyState == 4){ //狀態(tài)碼（對(duì)象隨時(shí)監(jiān)聽(tīng)狀態(tài)變化）
        if(xhr.status == 200){ //服務(wù)端返回的狀態(tài)碼
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

IE低版本兼容性問(wèn)題： 
使用ActiveXObject，與W3C標(biāo)準(zhǔn)不同

知識(shí)補(bǔ)充：

readystate： 
0：未初始化，還未調(diào)用send方法 
1：載入，已調(diào)用send方法，正在發(fā)送請(qǐng)求 
2：載入完成，send方法執(zhí)行完畢，已經(jīng)得到所有返回內(nèi)容 
3：交互，正在解析響應(yīng)內(nèi)容
4：完成，響應(yīng)內(nèi)容解析完成，可以在客戶(hù)端調(diào)用了（常用）

http標(biāo)準(zhǔn)碼 status：
2xx：請(qǐng)求成功 
3xx：重定向，瀏覽器跳轉(zhuǎn)
4xx：客戶(hù)端請(qǐng)求錯(cuò)誤、404找不到頁(yè)面 
5xx：服務(wù)器錯(cuò)誤、連接數(shù)據(jù)庫(kù)超時(shí)

5.跨域：

跨域：瀏覽器有同源策略的限制，不允許ajax訪問(wèn)其他域的接口
    （請(qǐng)求必須經(jīng)過(guò)信息提供方允許）

跨域條件： 協(xié)議，域名，端口，有一個(gè)不同就算跨域（http：默認(rèn)端口80 ，https：默認(rèn)443）

跨域的注意事項(xiàng): (1)所有的跨域請(qǐng)求都必須經(jīng)過(guò)信息提供方的允許 (2)如果味允許即可獲取，那就是瀏覽器的同源策略出現(xiàn)了問(wèn)題

可跨域的三個(gè)標(biāo)簽：

(1)  
 
    img用于打點(diǎn)統(tǒng)計(jì)，統(tǒng)計(jì)網(wǎng)站可能是其他域 
    (img沒(méi)有兼容性問(wèn)題，但有一個(gè)問(wèn)題，圖片的提供方提供了防盜鏈就會(huì)訪問(wèn)失?。?    
(2) 

    link script 可以使用CDN CDN可以是其他域

(3)