快捷導(dǎo)航

有關(guān)DOM元素與事件的3個(gè)謎題

更新時(shí)間：2010年11月11日 15:17:50 作者：

有關(guān)DOM元素與事件的3個(gè)謎題，學(xué)習(xí)與使用dom操作的朋友可以參考下。

一、背景知識(shí)介紹
通常為DOM元素增加事件有以下幾種辦法：
1，硬編碼形式
2，事件監(jiān)聽
3，JS框架提供的事件綁定
1，硬編碼形式，采用的是原始事件（Original Event）的形式。
代碼類似如下：

 
<element onclick='func();' /> 
document.getElementById('element_id').eventName = func(); 

2，事件監(jiān)聽機(jī)制，這種形式采用的做法是根據(jù)DOM事件機(jī)制，分為DOM標(biāo)準(zhǔn)事件模型addEventListener和IE事件模型attchEvent。
代碼類似如下：

復(fù)制代碼代碼如下:

 
var addEventHandler = function(ele, evt, fn){ 
if (ele.addEventListener) { 
ele.addEventListener(evt, fn, false); 
} 
else 
if (ele.attachEvent) { 
ele.attachEvent('on' + evt, fn); 
} 
else { 
ele['on' + evt] = fn; 
} 
}; 
var ele = document.getElementById('element_id'); 
addEventHandler(ele, 'eventName', function(){ code... }); 

3，JS框架提供的事件綁定機(jī)制，這里假設(shè)使用jQuery框架。
代碼類似如下：

復(fù)制代碼代碼如下:

 
$('element_id').bind('eventName', function(event){ code... }); 
$('element_id').click(function(){ code... }); 

二、謎題
謎題是這樣的，加入頁(yè)面中有如下的代碼片段：

復(fù)制代碼代碼如下:

 
<html> 
... ... 
<script type="text/javascript" src="js/jquery-lastest.js"></script> 
<script type="text/javascript"> 
var addEventhandler = function(ele, evt, fn){ 
if (ele.addEventListener) { 
ele.addEventListener(evt, fn, false); 
} 
else 
if (ele.attchEvent) { 
ele.attchEvent('on' + evt, fn); 
} 
else { 
ele['on' + evt] = fn; 
} 
}; 
function func_test(){ 
not_existfunc(); 
} 
$(document).ready(function(){ 
// code 02 
var jsbutton03 = document.getElementById('jsbutton_original_id03'); 
jsbutton03.onclick = func_test; 
// code 03 
var jsbutton02 = document.getElementById('jsbutton_original_id02'); 
addEventhandler(jsbutton02, 'click', func_test); 
// code 04 
$('#jqbutton_standard_id01').click(func_test); 
}); 
window.onerror = function(){ 
return true; 
}; 
</script> 
... ... 
<body> 
<input id="jsbutton_original_id01" type="button" onclick="func_test();" /> <!-- code 01 --> 
<input id="jsbutton_original_id02" type="button" /> 
<input id="jsbutton_original_id03" type="button" /> 
<input id="jqbutton_standard_id01" type="button" /> 
</body> 
... ... 
<script type="text/javascript"> 
// code 05 
$(document).ready(function(){ 
/* 
* 在這里編寫代碼，目標(biāo)是在不改變上面代碼的情況下對(duì)Code 1 ~ 4 的里的事件進(jìn)行“手術(shù)”。 
* 手術(shù)的要求是: 
* Code 1 ~ 4 里的觸發(fā)的OnClick行為會(huì)觸發(fā)func_test方法，該方法會(huì)觸發(fā)一個(gè)不存在的方法not_exist(); 
* 要求對(duì)其增加try/catch，再catch里捕獲此錯(cuò)誤。 
* 這里我提供 Code 1, 2 的改寫方法，瀏覽器的兼容程度只需要考慮主流的IE6，7，8和FireFox3+即可，Chrome，Safari，Opera可以不考慮。 
* 代碼可以使用jq代碼，也可以使用js代碼實(shí)現(xiàn)。 
*/ 
// hijack code 01 
var original_sorce_01 = $('#jsbutton_original_id01').attr('onclick'); // typeof original_source_01 is function 
$('#jsbutton_original_id01').removeattr('onclick').click(function(event){ 
try{ 
original_sorce_01(); 
} catch (ex) { 
// code... ... 
} 
}); 
// hijack code 02 
var jsbutton02 = document.getElementById('jsbutton_original_id02'); 
var original_source_02 = jsbutton02.onclick; 
jsbutton02.onclick = function(){ 
try{ 
original_source_02(); 
} catch (ex) { 
// code... ... 
} 
}; 
}); 
</script> 
</html> 

遵循以上的思路，有沒有人可以幫助我寫一下hijack code 03 和 hijack code 04的代碼？或者提供其他解決途徑呢？
遵循以上的思路，有沒有人可以幫助我寫一下hijack code 03 和 hijack code 04的代碼？或者提供其他解決途徑呢？
1，既有代碼是絕對(duì)不能修改的。
2，如果可以，擴(kuò)展js原始類也是允許的。
3，func_test和not_existfunc是事先不知道的，只能通過“獲取”得到。
4，最終的目的我需要知道錯(cuò)誤發(fā)生的錯(cuò)誤對(duì)象，方法名和事件、參數(shù)，基于此目的，其他解決方案也是可以的。
5，不能使用firebug之類的客戶端調(diào)試工具。來讓這類工具告訴你“代碼錯(cuò)了”。