- 编写一个通用的事件监听函数
- 描述事件冒泡流程
- 对于一个无限下拉加载图片的事件,如何给每个图片绑定事件
通用事件绑定
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('link')
bindEvent(a,'click',function(){
e.preventDefault() //阻止默认行为
alert('clicked')
})
IE低版本使用attachEvent绑定事件,和W3C标准不一样,最后想说的是IE这种东西...恩..大家都懂...
事件冒泡
<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>
<script>
var p1 = document.getElementById('p1')
var body = document.body
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
bindEvent(p1,'click',function(e){
e.stopPropagation()
alert('激活')
})
bindEvent(body,'click',function(e){
alert('取消')
})
</script>
</body>
代理
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<!-- 会随时新增更多a标签 -->
</div>
<script>
var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
var target = e.target
if(target.nodeName = 'A'){
alert(target.innerHTML)
}
})
</script>
完善~~~
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)
})
AJAX
- 手动编写一个AJAX,不依赖第三方库
- 跨域的几种实现方式
XMLHttpRequest
var xhr = new XMLHttpRequest()
xhr.open('GET','/api',true) //true代表要使用异步
xhr.onreadystatechange = function(){
//这里的函数异步执行,可参考之前JS基础中的异步模块
if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText)
}
}
}
xhr.send(null)
IE低版本使用ActiveXObject,和W3C标准不一样
状态码说明
readyState
- 0 (未初始化)还没有调用send()方法
- 1 (载入)已调用send()方法,正在发送请求
- 2 (载入完成)send()方法执行完成,已经接受到全部响应内容
- 3 (交互)正在解析响应内容
- 4 (完成)响应内容解析完成,可以在客户端调用了
status
- 2xx 表示成功处理请求.如200
- 3xx 需要重定向,浏览器直接跳转
- 4xx 客户端请求错误,如404
- 5xx 服务器端错误
跨域
什么是跨域?
浏览器同源策略,不允许ajax访问其他接口
跨域条件:协议,域名,端口,有一个不同就算跨域
但是有三个标签允许跨域加载资源: img link script
三个标签的场景
- <img>用于打点统计,统计网站可能是其他域
- <link> <script>可以使用CDN,CDN的也是其他域
- <script>可以用于JSONP
JSONP
JSON实现原理
- 加载http://coding.m.imooc.com/classindex.html
- 不一定服务器端真正有一个classindex.html文件
- 服务器可以根据请求,动态生成一个文件,返回
服务器端设置 http header
//不同后端语言写法可能不同
//第二个参数填写允许跨域的域名称,不建议填写"*"
response.setHeader("Access-Control-Allow-Origin","http://a.com,http://b.com");
response.setHeader("Access-Control-Allow-Headers","X-Rrquested-With");
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
//接受跨域的cookie
response.setHeader("Access-Control-Allow-Credentials","true");
存储
cookie
本身用于客户端和服务器端通信,但是它有本地存储的功能,于是就被''借用"
使用document.cookie = ...获取和修改即可
localStorage 和 sessionStorage
HTML5专门为存储而设计,最大容量5M.
API简单易用
localStorage.setItem(key,value)
localStorage.getItem(key)
localStorage会一直存储,而sessionStorage关闭浏览器就会被清除掉
