JS事件 - 監聽、冒泡、ajax 、跨域與存儲

時間 2019-12-10

原文原文鏈接

1.事件綁定html

方法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.事件冒泡node

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.代理（冒泡的應用）web

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 - 將事件綁定到父元素上

知識補充：ajax

通用事件綁定（用一個函數把基本事件綁定規則都封裝起來）：

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)
})

代理的好處：數據庫

一、代碼簡潔 
二、減小瀏覽器內存佔用

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)若是味容許便可獲取，那就是瀏覽器的同源策略出現了問題

可跨域的三個標籤：cookie

(1) <img src = xxx> 
 
    img用於打點統計，統計網站多是其餘域 
    (img沒有兼容性問題，但有一個問題，圖片的提供方提供了防盜鏈就會訪問失敗）
    
(2) <link  src = xxx>

    link script 可使用CDN CDN能夠是其餘域

(3) <script src = xxx>
    script能夠用於JSONP

JSONPsession

windoe.callback= function(data){} //獲取服務器返回的數據 data

實現原理:

一、加載一個網址 http：//demo/index.html
二、服務器端不必定真的須要有一個index.html文件
三、服務器能夠根據請求動態生成一個文件返回（即服務器端成成的內容能夠動態生成）

CROS：服務器端設置http Header

6.存儲：

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易用性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JS事件 - 監聽、冒泡、ajax 、跨域 與存儲

JS事件 - 監聽、冒泡、ajax 、跨域與存儲