同源策略、jsonp、阻塞事件

同源策略：

舉個例子，你在訪問 某個網頁的時候好比 www.xxxx.com ,返回的html頁面中存在的js在執行的時候只會在 xxxxx 這裏執行，若是同時存在另外一個tab 是 www.yyyyy.com 其中的js 在執行的時候只在 yyyyy 返回的這個首頁網頁中執行。

瀏覽器加載js的時候會判斷 js 所屬的 1.域名 2.端口 3.協議

 

jsonp：

json 是數據表達格式，相似於xml 固然，我說的相似值得的是它們都是數據表達格式，可是實現方式和格式都不一樣，在此很少說。

jsonp  = json + padding，爲何是padding 增長，說實話我也沒太明白，或許意思是 json 格式的擴展？。

jsonp 針對跨域請求，能夠完美執行，由於瀏覽器對html 標籤不會進行跨域攔截  （cross-domain），可是若是js中利用ajax 執行的話，雖然請求會發送到目標地址，可是相應的回參會被攔截，同時控制檯會有報錯信息。

可是若是有一些跨域請求是存在的，或者是咱們是把這些請求放在白名單中的，那麼就能夠用jsonp的方式進行請求，實現方法就是用element 節點進行訪問。

<script src="//cross-domain/xxxx？callback=test()"></script>

經過這種方式訪問跨域目標地址。

其中callback 是必填的，也就是說在callback的值表明回調函數的名稱，針對jsonp 的服務接口中會接口callback參數，並回調callback指定的函數。

固然本身寫跨域請求的時候回麻煩一些，好比動態訪問接口的時候，寫一個方法，增長節點後還要再刪除，爲了下次請求作準備，會比較麻煩，能夠經過一些前段擴展來實現會方便不少，好比jquery，文檔請自行百度。

 

那麼jsonp 我的理解就是針對跨域請求數據接口的一種技術方案。

 

3.關於阻塞事件

經常使用的有：

stopPropagation、stopImmediatePropagation：阻止事件向上/向下傳播，注意是阻止向上/向下，可是不阻止自己的傳播，好比div1 中 嵌套了div2，默認都是冒泡事件，div2綁定了2次事件，在div2 中綁定的第一個事件中使用stopPropagation，

那麼div2的事件在執行完畢後，div1做爲父節點不會再繼續執行，可是div2 綁定的第二個事件仍是會執行。

事件的觸發機制是根據綁定的順序來決定的，默認1，2是按順序綁定，咱們在事件1觸發的時候不想繼續傳播下去，包括自己綁定事件2，那麼能夠利用 stopImmediatePropagation 方法阻止繼續傳播。

 

　　let p = document.querySelector('p');
    p.addEventListener('click',function () {
        // event.stopImmediatePropagation()
        event.stopPropagation()
        alert("p")
    },false)

    p.addEventListener('click',function () {
        event.stopImmediatePropagation()
        alert("p2")
    },false)

 

另外就是return，在匿名函數中代碼最後一行執行return 也不會向上/向下傳播，可是一樣不會阻止自己的事件傳播。

再有一個是preventDefault 方法，是阻止事件自己的觸發機制，不會阻止事件的傳播，好比有個form ，其中有一個元素input type 是submit，若是使用preventDefault 那麼，不會默認請求form action中的地址。

例以下面，對一個a 標籤元素綁定的click事件中，阻止事件自己的觸發，a 中指定的url錨不會進行跳轉。

let a = document.querySelector('a');
    a.addEventListener('click',function () {
        event.preventDefault();
    },false)


// 元素 <a href="http://www.baidu.com">百度</a>