textContent、innerText 以及Event事件兼容性问题

今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决.
这里主要讨论Firefox与Chrome的兼容性问题.

textContent与 innerText

在javascript中, 为了获取节点的文本, 我们可以考虑使用节点的textContent、或者innerText,
然而,两者都并不能很好对所有浏览器进行兼容.

textContent: 不支持低版本 IE; 兼容 Chrome / Firefox / Safari / Opera / IE9.
innerText: 不支持Firefox; 兼容其他浏览器;
为了保证兼容性, 可以通过自定义的函数来解决;从另一位博主中找到了可借鉴的代码:

var div = document.getElementById(“content”);
function getInnerText(element) {
return (typeof element.textContent == “string”) ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == “string”) {
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, “Hello world!”);
alert(getInnerText(div)); //”Hello world!”
相关文档: MDN textContent;

event的兼容性问题

开发过程中,我们会给节点添加事件监听器,例如:

element.addEventListener(“click”, HandleClick);

function HandleClick() {
console.log(event.target);
}
为了在HandleClick()函数中获取到触发该函数的对象,我们可能会用到event.target, 这段代码可以在Chrome上正常运行,但在Firefox中出现报错,
控制台将显示不存在event对象.

说明: Firefox的event只能在事件发生的现场使用(来自百度).

解决方法:

1.我们可以通过修改html标签, 传递event参数给相应的函数:

这样便获取了event, 接下来就可以在HandleClick()函数中愉快地使用event了;(当然,event的某些属性兼容性也需要另外考虑)

2.不传递event对象, 直接在 HandleClick()函数中获取;
代码来自另一位博主:

unction HandleClick()
{
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
var src = evt.srcElement || evt.target; // 获取触发事件的源对象
var iKeyCode = evt.keyCode || evt.which; //获取按钮代码
alert(src.value); // 打印该对象的value属性
if (window.navigator.userAgent.indexOf(“IE”)>=1){
evt.keyCode =0;
evt.returnValue=false;
}else{
evt.preventDefault();
}
}
此时我们的html文件中不需要传递event给HandleClick函数, 如下:

from:
http://www.cnblogs.com/sysuhanyf/p/5383402.html