摘要：事件綁定方法直接綁定方法封裝函數調用綁定事件阻止默認行為例標簽點擊跳轉低版本綁定事件兼容問題不識別方法，改用綁定事件，和標準不一樣事件冒泡部分激活取消取消取消部分阻止往上冒泡激活取消事件冒泡機制順著數據結構底層葉子結點一個點擊事件，會一

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部分：

    

        
激活
        
取消
    
    

        
取消
        
取消
    


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部分：

    
    
    
    


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用于打點統計，統計網站可能是其他域 
    (img沒有兼容性問題，但有一個問題，圖片的提供方提供了防盜鏈就會訪問失敗）
    
(2) 

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

(3)