event 对象兼容火狐、谷歌、ie浏览器问题

项目中遇到这样一个业务需求：给动态生成的页面元素（input、div、checkbox等）添加事件，业务实现的难点在于：动态生成的页面元素的id、name都是按一定规则赋值的（例如：input1、input2..）,那么给这些元素添加事件需要获取到动态生成元素的id或name属性值，根据属性值取到元素对象然后添加事件。

经过以上分析不难看出：难点就在于取得动态生成元素的id、name属性值，给元素添加事件应该很容易办到，这时js中一个重要的对象event 该隆重出场了。

事件发生的过程中 event对象才生效，event对象有很对属性：例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。具体event 的对象的众多属性在此就不做详细的介绍，网上关于event属性介绍的帖子很多。

获取当前触发事件的页面元素使用event的target和srcElement 属性，srcElement 在ie中使用，target在firefox中使用，chrome浏览器同时具有这两个属性，但据我个人测试，target属性在ie10中也可以使用了（ie其他版本没有测试），这样如果我要获取触发事件的元素的属性值就可以搞定了：

var name_val = event.target.name;

var id_val = event.target.id;

但是问题出现了：在火狐浏览器中不能直接用event对象，浏览器无法根据当前触发的事件获取event对象。解决方法有这么几种：

（1）调用事件方法时添加参数event(参数名称必须为event,其他名称不可以)，例如： function aa(event){........} ,元素：<input type="text" onclick="aa(event)"></input>

(2)使用函数 arguments.callee.caller.arguments[0] 获取event对象，使用这种方法不需要在函数中声明event参数，可以直接使用，而且在火狐浏览器中有效

（3）为火狐浏览器声明可以直接调用的event对象：

/*
判断浏览器名称和版本
目前只能判断:ie/firefox/chrome/opera/safari
2012年5月16日23:47:08
浏览器内核名称:NV.name;
浏览器内核版本:NV.version;
浏览器外壳名称:NV.shell;
*/
var NV = {};
var UA = navigator.userAgent.toLowerCase();
try{NV.name=!-[1,]?'ie':(UA.indexOf("firefox")>0)?'firefox':(UA.indexOf("chrome")>0)?'chrome':window.opera?'opera':window.openDatabase?'safari':'unkonw';}catch(e){};
try{NV.version=(NV.name=='ie')?UA.match(/msie ([\d.]+)/)[1]:(NV.name=='firefox')?UA.match(/firefox\/([\d.]+)/)[1]:(NV.name=='chrome')?UA.match(/chrome\/([\d.]+)/)[1]:(NV.name=='opera')?UA.match(/opera.([\d.]+)/)[1]:(NV.name=='safari')?UA.match(/version\/([\d.]+)/)[1]:'0';}catch(e){};
try{NV.shell=(UA.indexOf('360ee')>-1)?'360极速浏览器':(UA.indexOf('360se')>-1)?'360安全浏览器':(UA.indexOf('se')>-1)?'搜狗浏览器':(UA.indexOf('aoyou')>-1)?'遨游浏览器':(UA.indexOf('theworld')>-1)?'世界之窗浏览器':(UA.indexOf('worldchrome')>-1)?'世界之窗极速浏览器':(UA.indexOf('greenbrowser')>-1)?'绿色浏览器':(UA.indexOf('qqbrowser')>-1)?'QQ浏览器':(UA.indexOf('baidu')>-1)?'百度浏览器':(UA.indexOf('360se')>-1)?'':'未知或无壳';}catch(e){}
/*
给火狐添加event属性。
*/
if(NV.name=='firefox')
{
var $E = function(){var c=$E.caller; while(c.caller)c=c.caller; return c.arguments[0]};
__defineGetter__("event", $E);
}
（引用：http://qianduanblog.com/874.html）

具体项目中的应用代码是这样的：

for ( var m = 1; m <= 5; m++) {
$("#startTime" + m).blur(
function() {
var e = arguments.callee.caller.arguments[0] || window.event;
var idVal = e.target.id;
var startTime_ = $("#" + idVal).val();
var timePart = $('#dutyPart').val();
if (startTime_ != null && startTime_ != ""
&& startTime_ != undefined && timePart != 0) {
autoInitStartAndOffTime(idVal, startTime_, timePart);
}
});

$("#endTime" + m).blur(
function() {
var e = arguments.callee.caller.arguments[0] || window.event;
var idVal = e.target.id;
var endTime_ = $("#" + idVal).val();
var timePart = $('#dutyPart').val();
if (endTime_ != null && endTime_ != ""
&& endTime_ != undefined && timePart != 0) {
autoInitStartAndOffTime(idVal, endTime_, timePart);
}
});
}

这样就实现了event 浏览器的兼容问题。

秒客网

event 对象兼容火狐、谷歌、ie浏览器问题

相关文章