事件委托

1. 什么是事件委托

• 给父元素注册事件,委托给子元素处理

2. 事件委托原理

• 事件冒泡

3. 事件委托注意点

• (1)this指向父元素
• (2)e.target指向触发事件的子元素 4.应用场景
• 给动态新增注册委托事件

跨域

1. 什么是跨域?

• 发起Ajax请求的那个页面地址 和 Ajax接口地址 不在同一个域中
• 跨域错误:不同源的Ajax请求
• 同源:协议,域名,端口都相同

2. 跨域原因:

• 请求响应双方url不同源。
• 请求类型是Ajax请求。不是请求图片资源，js文件,css文件等
• 浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略
• 同源策略是一个重要的安全策略，它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。

3. 解决思路

• 请求响应双方url不同源。

  服务器代理

• 请求类型是Ajax请求。

  改发JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。它本质并不是ajax请求，所以没有跨域问题。

原理 
   script的src属性可以请求外部的js文件，这个请求不是ajax，它没有跨域问题。
   借助 `script` 标签的src请求服务端上的接口。`<script src="http://localhost:3000/get"`
   服务端的接口返回JavaScript 脚本，并附上要返回的数据。例如：`res.end("fn(数据)")`

//前端代码
$.ajax({
   type: 'GET',
   url: 'http://localhost:4000/get', 
   success: function (result) {
      console.log(result);
   },
   dataType: 'jsonp' // 必须要指定dataType为jsonp
});

//后端代码
const express = require('express');
const app = express();
app.get('/get', (req, res) => {
  let data = {a:1,b:2}
  // res.json(data)
  res.jsonp(data)
})
app.listen(3000, () => {
  console.log('你可以通过http://localhost:3000来访问...');
});

• 浏览器觉得不安全。

  可以安装插件allow-control-allow-origin绕过同源策略

  用postman软件测试

  CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。(除IE支持其他浏览器)

-   这种方案无需客户端作出任何变化（客户端不用改代码），就当跨域问题不存在一样。
-   服务端响应的时候添加一个 `Access-Control-Allow-Origin` 的响应头

• 使用包cors

    var cors = require('cors')
    app.use(cors()) 

4. CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。