? ? ? ? 項目中遇到這樣一個業(yè)務需求：給動態(tài)生成的頁面元素（input、div、checkbox等）添加事件，業(yè)務實現(xiàn)的難點在于：動態(tài)生成的頁面元素的id、name都是按一定規(guī)則賦值的（例如：input1、input2..）,那么給這些元素添加事件需要獲取到動態(tài)生成元素的id或name屬性值，根據(jù)屬性值取到元素對象然后添加事件。

? ? ? ? ? ? 經(jīng)過以上分析不難看出：難點就在于取得動態(tài)生成元素的id、name屬性值，給元素添加事件應該很容易辦到，這時js中一個重要的對象event 該隆重出場了。

? ? ? ? 事件發(fā)生的過程中 event對象才生效，event對象有很對屬性：例如觸發(fā)event對象的元素、鼠標的位置及狀態(tài)、按下的鍵等等。 event的某些屬性只對特定的事件有意義。比如，fromElement?和?toElement?屬性只對?onmouseover?和?onmouseout?事件有意義。 具體event 的對象的眾多屬性在此就不做詳細的介紹，網(wǎng)上關(guān)于event屬性介紹的帖子很多。

? ? ? ? ?獲取當前觸發(fā)事件的頁面元素 使用event的target和srcElement 屬性，srcElement 在ie中使用，target在firefox中使用，chrome瀏覽器同時具有這兩個屬性，但據(jù)我個人測試，target屬性在ie10中也可以使用了（ie其他版本沒有測試），這樣如果我要獲取觸發(fā)事件的元素的屬性值就可以搞定了：

? ? ? ? ?var name_val = event.target.name;

? ? ? ? ?var id_val = event.target.id;

? ? ? ? ?但是問題出現(xiàn)了：在火狐瀏覽器中不能直接用event對象，瀏覽器無法根據(jù)當前觸發(fā)的事件獲取event對象。解決方法有這么幾種：

? ? ? ? （1）調(diào)用事件方法時添加參數(shù)event(參數(shù)名稱必須為event,其他名稱不可以)，例如： function aa(event){........} ,元素：<input type="text" οnclick="aa(event)"></input>

? ? ? ? ? (2)使用函數(shù) ??arguments.callee.caller.arguments[0] 獲取event對象，使用這種方法不需要在函數(shù)中聲明event參數(shù)，可以直接使用，而且在火狐瀏覽器中有效

? ? ? ? ?（3）為火狐瀏覽器聲明可以直接調(diào)用的event對象：

? ? ? ? ?

/*

判斷瀏覽器名稱和版本

目前只能判斷:ie/firefox/chrome/opera/safari

2012年5月16日23:47:08

瀏覽器內(nèi)核名稱:NV.name;

瀏覽器內(nèi)核版本: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);
}
});
}

? ? ? ?這樣就實現(xiàn)了event 瀏覽器的兼容問題。

? ? ? ? ? ??

總結(jié)

以上是生活随笔為你收集整理的event 对象兼容火狐、谷歌、ie浏览器问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。