题目： 1、编写一个通用的事件监听函数 2、描述事件冒泡流程 3、对于一个无限下拉加载图片的页面，热河给每个图片绑定事件
知识点： 1、通用事件绑定 2、事件冒泡 3、代理
1、通用事件绑定
var btn = document.getElementById('btn1') btn.addEventListener('click',function(event){ console.log('clicked') }) function bindEvent(elem, type, fn){ elem.addEventListener(type, fn) } var a = document.getElementById('link1') bindEvent(a,'click',function(e){ e.preventDefault() //阻止默认行为 alert（'clicked'） })事件冒泡： 问题：
<body> <div id="div1"> <p id="p1">激活</p> <p id="p2">取消</p> <p id="p3">取消</p> <p id="p4">取消</p> </div> <div id="div2"> <p id="p5">取消</p> <p id="p6">取消</p> </div> </body>问题，只给p1绑定点击弹出激活的事件，其他都绑定点击取消的事件
代码实现：
var p1 = document.getElementById('p1') var body = document.body bindEvent(p1,'click',function(e){ e.stopPropagation() alert('激活') }) bindEvent(body,'click',function(e){ alert('取消') })代理：
<div id="div1"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <!--会随时增加更多 a 标签--> </div>为每一个a都绑定上事件：
方案：
var div1 = document.getElementById('div1') div1.addEventListener('click',function(e){ var target = e.target if(target.nodeName === 'A'){ alert(target.innerHTML) } })将事件绑定到父元素上。
完善通用绑定事件的函数：
function bindEvent(elem, type, selector, fn){ if(fn == null){ fn = 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、减少浏览器内存占用
Ajax： 题目：1、手动编写一个ajax，不使用第三方库 2、跨域的几种实现方式
知识点： 1、XMLHttpRequest 2、状态码的说明 3、跨域
//XMLHttpRequest var xhr = new XMLHttpRequest() xhr.open('GET','路径',false)//false代表可以异步执行 xhr.onreadystatechange = function(){ //这里是一个异步的函数 if(xhr.readyState == 400){ if(xhr.status == 2){ alert(xhr.responseText) } } } xhr.send(null)IE兼容性问题： ActiveXObject
readystate 0 (未初始化，还未调用send方法) 1 （载入，已调用send方法，正在发送请求） 2 （载入完成，send方法执行完毕，已经得到所有返回内容） 3 （交互，正在解析响应内容） 4 （完成，响应内容解析完成，可以在客户端调用了）
status
200 表示请求成功 300 重定向 400 客户端请求错误 404找不到页面 500 服务器错误
跨域： 1、什么是跨域 2、JSONP 3、http header
1、什么是跨域 浏览器有同源策略的限制，不允许ajax访问其他域的接口
跨域条件： 协议，域名，端口，有一个不同就算跨域 http：默认80 https：默认403
但是有三个标签允许跨域：
<img src = xxx> 有一个问题，图片的提供方提供了防盗链 <link src = xxxx> <script src = xxx>三个标签的场景
img用于打点统计，统计网站可能是其他域 百度统计，站长统计等 img没有兼容性问题
link script 可以使用CDN CDN可以是其他域
script可以用于JSONP，
跨域的注意事项， 1、所有的跨域请求都必须经过信息提供方的允许 2、如果味允许即可获取，那就是浏览器的同源策略出现了问题
JSONP实现原理
1、加载一个网址http：//my/index.html
2、不一定服务器端真的有一个index.html文件
3、服务器可以根据请求动态生成一个文件返回 即服务器端成成的内容可以动态生成。
存储： 请描述一下session，cookie，localStorage，sessionStorage的区别
cookie：本来是用于浏览器和服务器端通信的，但是它有本地存储的功能，就被‘借用’， 使用document.cookie = ”获取和修改即可
缺点：小，只有4kb 2、所有http请求都带着，会影响获取资源的效率 3、API简单，需要封装才能用
localStorage 和 sessionStorage
HTML5专门用存储而设计，最大容量5M API简洁易用 localStorage.setItem(key,value); localStorage.getItem(key)
有个坑 IOS safari 隐藏模式下， localStorage.getItem() 会报错 建议统一使用try-catch封装一下
