事件，ajax，存储

来源：互联网发布：手机数据共享编辑：程序博客网时间：2024/06/07 03:35

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

阅读全文

0 0