有关DOM元素与事件的3个谜题

程序员文章站 2023-11-25 12:53:16

一、背景知识介绍通常为dom元素增加事件有以下几种办法： 1，硬编码形式 2，事件监听 3，js框架提供的事件绑定 1，硬编码形式，采用的是原始事件（original e...

一、背景知识介绍
通常为dom元素增加事件有以下几种办法：
1，硬编码形式
2，事件监听
3，js框架提供的事件绑定
1，硬编码形式，采用的是原始事件（original event）的形式。
代码类似如下：

 
<element onclick='func();' /> 
document.getelementbyid('element_id').eventname = func(); 

2，事件监听机制，这种形式采用的做法是根据dom事件机制，分为dom标准事件模型addeventlistener和ie事件模型attchevent。
代码类似如下：

复制代码代码如下:

 
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框架提供的事件绑定机制，这里假设使用jquery框架。
代码类似如下：

复制代码代码如下:

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

二、谜题
谜题是这样的，加入页面中有如下的代码片段：

复制代码代码如下:

 
<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(){ 
/* 
* 在这里编写代码，目标是在不改变上面代码的情况下对code 1 ~ 4 的里的事件进行“手术”。 
* 手术的要求是: 
* code 1 ~ 4 里的触发的onclick行为会触发func_test方法，该方法会触发一个不存在的方法not_exist(); 
* 要求对其增加try/catch，再catch里捕获此错误。 
* 这里我提供 code 1, 2 的改写方法，浏览器的兼容程度只需要考虑主流的ie6，7，8和firefox3+即可，chrome，safari，opera可以不考虑。 
* 代码可以使用jq代码，也可以使用js代码实现。 
*/ 
// 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，既有代码是绝对不能修改的。
2，如果可以，扩展js原始类也是允许的。
3，func_test和not_existfunc是事先不知道的，只能通过“获取”得到。
4，最终的目的我需要知道错误发生的错误对象，方法名和事件、参数，基于此目的，其他解决方案也是可以的。
5，不能使用firebug之类的客户端调试工具。来让这类工具告诉你“代码错了”。

有关DOM元素与事件的3个谜题