JavaScript-总结篇之冒泡,代理,跨域

• 编写一个通用的事件监听函数
• 描述事件冒泡流程
• 对于一个无限下拉加载图片的事件,如何给每个图片绑定事件

通用事件绑定

 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这种东西...恩..大家都懂...

事件冒泡

    

        
激活
        
取消
        
取消
        
取消
    
    

        
取消
        
取消
    

    

代理

    a1
    a2
    a3
    a4
    

完善~~~

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

三个标签的场景

• 用于打点统计,统计网站可能是其他域