6-1 事件
题目
1.编写一个通用的事件监听函数
2.描述事件冒泡流程
dom树形结构
事件冒泡
阻止冒泡
冒泡应用
3.对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
使用代理
代理优点
知识点
通用事件绑定
// 通用事件绑定
var btn = docuement.getElementById('btn1')
btn.addEventListener('click', function(event){
console.log('clicked')
})
function bindEvent(ele, type, fn){
elem.addEventListener(type, fn)
}
var a = docuement.getElementById('link1')
bindEvent(a, 'click', function(e){
e.preventDefault() // 阻止默认行为 例如a链接标签，点击会跳转，所以要阻止默认行为
alert('clicked')
})
关于ie低版本的兼容性
ie低版本使用 attachEvent 绑定事件，和w3c标准不一样
事件冒泡
<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>
var p1 = docement.getElementById('p1')
var body = docement.body
bindEvent(p1, 'click', funtion(e){
// 阻止冒泡事件
e.stopPropatation()
alert('激活')
})
bindEvent(body, 'click', function(e){
alert('取消')
})
代理
好处：
1.代码简洁
2.减少浏览器内存占用
事件绑在div1,点击每个a标签都会冒泡到div上
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
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.matchs(selector)){
fn.call(target, e)
}
} else {
fn(e)
}
})
}
// 使用代理
var div1 = docement.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e){
console.log(this.innerHTML)
})
// 不使用代理
var a = docement.getElementById('a1')
bindEvent(a, 'click', function(e){
console.log(a.innerHTML)
})
6-2 Ajax
题目
手动编写一个ajax
知识点
XMLHttpRequest
// XMLHttpRequest
var xhr = new XMLHttpRequest()
xhr.open("GET", "/api", false)
xhr.onreadystatechange = function() {
// 这里是函数异步执行
if(xhr.readyStare == 4){
if(xhr.status == 200){
alert(xhr.responseText)
}
}
}
xhr.send(null)
//ie兼容性问题
//ie低版本使用 ActiveXObiect,和w3c标准不一样
状态码说明
readyState
0 (未初始化) 还没调用send()方法
1 (载入) 已调用send()方法，正在发送请求
2 (载入完成) send()方法执行完成，已经接收到全部响应2内容
3 (交互) 正在解析响应内容
4 (完成) 响应内容解析完成，可以在客户端调用
status
2xx 表示成功处理请求，如200
3xx 需要重定向，浏览器跳转
4xx 客户端请求错误，如404
5xx 服务端请求错误
跨域
6-3 Ajax-跨域
问题
什么是跨域
所有的跨域请求都必须经过信息提供方允许
如果未经允许即可获取，那是浏览器同源策略出现漏洞
浏览器有同源策略，不允许ajax 访问其他域接口
跨域条件： 协议（http、https）、域名、端口，有一个不同就算跨域
可跨域的三个标签
但是有三个标签允许跨域加载资源
<img src=xxx>
<link href=xxx>
<script src=xx>
三个标签的场景
<img src=xxx> 用于打点统计，统计网站可能是其他域
<link> <script> 可以使用CDN, CDN的也是其他域
<script> 可以用于JSONP
JSONP
- 加载 http://coding.m.imooc.com/classindex.html
- 不一定服务端真正有一个classInde.html 文件
- 服务端可以根据请求，动态生成一个文件，返回
- 同理于 <script src="http://coding.m.imooc.com/api.js">
例子
例如你的网站要跨域访问慕课网的一个接口
慕课给你一个地址 http：//coding,m,imooc.com/api.js
返回内如格式如 callback({x: 100, y:200}) (可动态生成)
<script>
window.callback = function(data){
// 这是我们跨域得到的信息
console.log(data)
}
</script>
<script src="http://coding.m.imooc.com/api.js"></script>
// 以上将返回 callback({x:100, y:200})
服务端设置 http header 解决跨域
另外一个解决跨域的简洁方法，需要服务器端来做
但是作为交互方，我们必须知道这个方法
是将来解决跨域问题的一个趋势
6-3 存储
题目
请描述一下cookie， sessionStorage 和 localStorage 的区别
容量
是否会携带到ajax 中
API 易用性
知识点
cookie
locationStorage 和 sessionStorage
cookie
本身用于客户端和服务端通信
但是它有本地存储的功能，于是就被借用
使用 document.cookie = ... 获取和设置即可
缺点
存储量太小，只有4kb
所有http请求都带着，会影响获取资源的效率
API 简单，需要封装才能用 document.cooie = ...
locationStorage（浏览器关了还在） 和 sessionStorage(浏览器关了就没了)
HTML5 专门为存储而设计，最大容量5M
API 简单易用
localStorage.setItem(key, value); localStorage.getItem(key);
注意
IOS safari 隐藏模式下
localStorage.getItem 会报错
建议统一使用 try-catch 封装
