javascript - JS事件 - 监听、冒泡、ajax 、跨域与存储 - 李小李小白菜成长日记

1.事件绑定

方法1 - 直接绑定
var btn = document.getElementById('btn1')
btn.addEventListener('click',function(event){
    console.log('clicked')
})

方法2 - 封装函数调用
function bindEvent(elem, type, fn){
    elem.addEventListener(type, fn) //addEventListener 绑定事件
}

var a = document.getElementById('link1')
bindEvent(a,'click',function(e){
    e.preventDefault() //阻止默认行为（例：a标签点击跳转）
    alert（'clicked'）
})

IE低版本绑定事件兼容问题：
不识别addEventListener方法，改用attachEvent绑定事件，和W3C标准不一样

2.事件冒泡

HTML部分：
<body>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
    </div>
    <div id="div2">
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
</body>

JS部分：
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1,'click',function(e){
    e.stopPropagation() //阻止（往上）冒泡
    alert('激活')
})
bindEvent(body,'click',function(e){
    alert('取消')
})

事件冒泡机制：顺着DOM数据结构底层叶子结点一个点击事件，会一层一层根据这个树形结构，往父元素去触发

3.代理（冒泡的应用）

HTML部分：
<div id="div1">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <!--随时增加更多  a  标签-->
</div>

JS部分：
方案1 - 为每一个a都绑定上事件（新增时无法绑定）：
    var div1 = document.getElementById('div1')
    div1.addEventListener('click',function(e){
        var target = e.target //获取点击从哪触发
        if(target.nodeName === 'A'){
            alert(target.innerHTML)
        }
    })
    
方案2 - 将事件绑定到父元素上

知识补充：

通用事件绑定（用一个函数把基本事件绑定规则都封装起来）：

function bindEvent(elem, type, selector, fn){
    if(fn == null){
        fn = selector //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、减少浏览器内存占用

4.ajax

XMLHttpRequest（函数）：

var xhr = new XMLHttpRequest()
xhr.open('GET','路径', true) //true代表可以异步执行
xhr.onreadystatechange = function(){ //这里是一个异步的函数
    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：完成，响应内容解析完成，可以在客户端调用了（常用）

http标准码 status：
2xx：请求成功 
3xx：重定向，浏览器跳转
4xx：客户端请求错误、404找不到页面 
5xx：服务器错误、连接数据库超时

5.跨域：

跨域：浏览器有同源策略的限制，不允许ajax访问其他域的接口
    （请求必须经过信息提供方允许）

跨域条件： 协议，域名，端口，有一个不同就算跨域（http：默认端口80 ，https：默认443）

跨域的注意事项: (1)所有的跨域请求都必须经过信息提供方的允许 (2)如果味允许即可获取，那就是浏览器的同源策略出现了问题

可跨域的三个标签：

(1) <img src = xxx> 
 
    img用于打点统计，统计网站可能是其他域 
    (img没有兼容性问题，但有一个问题，图片的提供方提供了防盗链就会访问失败）
    
(2) <link  src = xxx>

    link script 可以使用CDN CDN可以是其他域

(3) <script src = xxx>
    script可以用于JSONP

JSONP

windoe.callback= function(data){} //获取服务器返回的数据 data

实现原理:

1、加载一个网址 http：//demo/index.html
2、服务器端不一定真的需要有一个index.html文件
3、服务器可以根据请求动态生成一个文件返回（即服务器端成成的内容可以动态生成）

CROS：服务器端设置http Header

6.存储：

cookie：用于浏览器和服务器端通信的，因为有本地存储功能，被‘借用’) 
        document.cookie = ”“ //获取、修改

缺点：
(1) 内存小，仅4kb 
(2) 因为通信，所有http请求都带着（会影响获取资源的效率） 
(3) API简单，需要封装

localStorage（常用）和 sessionStorage


优点：
(1) HTML5专门用存储而设计，最大容量5M，不用在请求中带着
(2) API简洁易用 (localStorage.setItem(key,value)、localStorage.getItem(key)、removeItem)

注意事项：
IOS safari 隐藏模式下，localStorage.getItem() 会报错，建议用 try-catch 封装一下

cookie 与 webStorage 区别：

（1）容量
（2）是否会携带到 ajax 中
（3）API易用性

JS事件 - 监听、冒泡、ajax 、跨域与存储

艿厝

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

JS事件 - 监听、冒泡、ajax 、跨域 与存储

艿厝

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

JS事件 - 监听、冒泡、ajax 、跨域与存储