为什么要有事件兼容写法?
因为 IE9 以及以下这些个妖艳贱货,奏事不喜欢按着W3C事件定义的标准来.
微软一开始凭借着自己 IE 浏览器在市场的占有率比较高,就有恃无恐的和W3C对着干.
所以,很多语法都是它们微软公司自己搞的!!!并不符合W3C的标准.
基本上所有的兼容写法,都是因为微软的狂妄自大,导致了IE9以及以下这些个妖艳贱货特立独行!!!
后来发现自己的浏览器的市场占有份额越来越低,就萎了.
从 IE10 到最新的 Edge 就开始往 W3C 的标准上去靠了.
但是市面上还是有一些用户使用 IE9 以及以下版本的浏览器.
这就是为什么需要兼容写法??
给我们前端程序员无谓的添加心智负担..
草拟大爷的 < IE9
几种事件绑定的写法.
el.onEventType = function () {}.
最早期,形式上也是最LOW,但是兼容性最好的一种写法.
就是大家常用的句柄式写法.
el.onclick = function () {
console.log('xxx')
}
这种写法的优点
- 兼容性最好. IE Chrome firefox 等主流非主流浏览器等基本都支持这种写法.
- 句柄式的事件绑定写法,在函数内部直接返回
return false. 可以方便的阻止一些元素的默认后续事件. - 事件解帮非常方便
el.onclick = null即可.
这种写法的缺点
- 只能支持事件冒泡模式.
- 一次只能绑定一个事件响应函数.
el.addEventListener(type,fn,eventModel)
addEventListener 是W3C提供的一种标准的事件绑定方法.
可以指定事件的执行模式(事件捕获或事件冒泡)
在目前所有的比较主流的浏览器都支持了这种写法.
比如 : firefox chrome safari IE10 Edge 等.
此方法最大的缺点在于: IE9 以及以下的版本并不支持这种写法. 所以兼容性有一定的问题.
addEventType.addEventListener('click', function () {
console.log('xxx')
}, false)
这种写法的好处:
- W3C标准的事件绑定.更加符合规范.
- 可以支持事件冒泡或者是事件捕获.(第三个参数:true是事件捕获,false是事件冒泡)
- 可以为当个元素添加多个事件响应函数.
这种写法的坏处:
- IE9 以及比较旧的老版本浏览器不支持这个API.
- 无法将匿名事件响应函数解绑.
function fn () {}
addEventType.addEventListener('click', fn, false)
// 必须是具名函数,匿名的无法解绑.
addEventType.removeEventListener('click',fn)
el.attachEvent
attachEvent 是 IE 浏览器独有的事件绑定API.
el.attach('onclick',function () {
console.log(this === window) //true
})
这个除了兼容性是狗屎以外,最大的一个问题是.
**事件响应函数体里的this指向的不是事件元素对象,而是全局 window
el.attachEvent('onclick', function() {
hanlder.call(el) // 解决 this 指向的不是el的问题.
})
// 事件的事件响应函数
function handler () {
xxxxxx
}
同时函数解绑,也无法解绑匿名函数,必须解绑具名函数.
addEvent
addEvent 封装,以兼容的模式来为元素添加事件.
function addEvent(el,type,handler) {
if (el.addEventListener) {
el.addEventListener(type,handler,false) // 默认事件冒泡
} else if (el.attachEvent) {//IE9 以及老版本IE浏览器
el.attachEvent('on'+ type,function () {
handler.call(el) // 解决this指向问题.
})
} else {
el['on'+ type] = hanlder // 最原始,也是兼容性最好的写法.
}
}
网友评论