同源策略、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>