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部分：

    

        
激活
        
取消
    
    

        
取消
        
取消
    


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部分：

    
    
    
    


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

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

(3)