事件兼容问题

attachEvent 和 addEventListener

1
2
3
4
5
6
7
8
9
10
//attachEvent 是IE678支持的 而  addEventListener是其他大部分浏览器支持的
function addEvent(el,e,fn){
    if(el.addEventListener){
        el.addEventListener(e,fn)
    }else if(el.attachEvent){
        el.attachEvent("on"+e,fn)
    }else{
        el["on"+e]=fn
    }
}

addEventListener(e,fn[,boolean])

可以两个必传的参数和一个可传参数

e：事件类型

fn：事件函数

boolean: 是否支持捕获 true就是捕获 false就是冒泡

冒泡和捕获

冒泡是从当前元素到父元素依次触发事件

1
2
3
4
5
6
7
8
9
var father=document.getElementById('#box')
var son = father.chlidren[0]
father.addEventListener('click',function(e){
    console.log('father')
},false)
son.addEventListener('click',function(e){
    console.log('son')
},false)
//点击son  会先打印 son   在打印  father

捕获是从父元素到当前元素依次触发事件

1
2
3
4
5
6
7
8
9
var father=document.getElementById('#box')
var son = father.chlidren[0]
father.addEventListener('click',function(e){
    console.log('father')
},true)
son.addEventListener('click',function(e){
    console.log('son')
},true)
//点击son  会先打印 father   在打印  son

捕获不常用 而冒泡最常见的就是在事件委托

事件委托只要是因为当页面重新渲染后,渲染的内容所有注册的事件都失效了,所有用到了事件委托

1
2
3
4
5
6
7
8
9
10
var father=document.getElementById('#box')
//点击father里面的div弹出 '你好'
father.addEventListener('click',function(e){
    if(e.target.tagName==="DIV"){
        window.alert('你好')
    }
},false)
var son=document.creatElement('div')
son.innerHTML="点我"
father.appendChild(son);