题目:
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封装一下