1.IE在调用事件的时候没有传入事件对象,而是作为window.event存在.因此,如果要用到event对象.可以这样写:event = event ||window.event解决了不同浏览器兼容.
2.批量修改样式:
FF:dom.setAttribute('style',css);dom.style.cssTest =css;
IE:dom.style.setAttribute("cssText",css);dom.style.cssTest =css;
可见,dom.style.cssTest =css;可解决浏览器兼容问题.
来一段网上摘取的解释:
IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置className ,style和onclick这些属性
在IE中是行不通的
为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").οnclick= function () { alert("This is a test!"); }
3.事件流模型的差异
IE:由里向外,W3C:由外向里
event.cancelBubble===stoppopagation()//阻止冒泡
event.returnValue === preventDefault()//停止默认事件
attachEvent() ==== addEventListener//增加事件监听
detachEvent() ===== removeEventListener//移除事件
fireEvent() ===== createEvent(),initEvent(),dispatchEvent()//触发事件
其中,IE下fireEvent与click都可以触发,不同的是click必须要有onclick声明,fieEvent不会阻止事件的冒泡.
FF下事件触发是通过以下代码解决的:
card = document.getElementById(‘id’);
var ev = document.createEvent(‘HTMLEvents’);
ev.initEvent(‘click’, false, true);
card.dispatchEvent(ev);
终极方案(来自蓝色理想),其实就是加了一个检测:
document.getElementById(“me”).onclick = function() {
var card = document.getElementById(“card”);
if(document.createEvent){
var ev = document.createEvent(‘HTMLEvents’);
ev.initEvent(‘click’, false, true);
card.dispatchEvent(ev);
}
else card.click();
}