[Web拾遗]有关DOM元素与事件的3个谜题

[Web拾遗]有关DOM元素与事件的3个谜题

 

一、背景知识介绍

通常为DOM元素增加事件有以下几种办法：
1，硬编码形式
2，事件监听
3，JS框架提供的事件绑定

1，硬编码形式，采用的是原始事件（Original Event）的形式。
   代码类似如下：

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

2，事件监听机制，这种形式采用的做法是根据DOM事件机制，分为DOM标准事件模型addEventListener和IE事件模型attchEvent。

   代码类似如下：

 1      var  addEventHandler  =   function (ele, evt, fn){
 2                  
 3       if  (ele.addEventListener) {
 4                      
 5        ele.addEventListener(evt, fn,  false );
 6      }
 7       else  
 8         if  (ele.attachEvent) {
 9                          
10           ele.attachEvent( ' on '   +  evt, fn);
11        }
12         else  {
13                          
14           ele[ ' on '   +  evt]  =  fn;
15        }
16      };
17 
18     var  ele  =  document.getElementById( ' element_id ' );
19    addEventHandler(ele,  ' eventName ' ,  function (){ code... });
20 
21 

 

3，JS框架提供的事件绑定机制，这里假设使用jQuery框架。
   代码类似如下：

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

 

 

二、谜题

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

 

 1  < html >
 2  ... ...
 3  < script  type ="text/javascript"  src ="js/jquery-lastest.js" ></ script >
 4  < script  type ="text/javascript" >
 5 
 6     var  addEventhandler  =   function (ele, evt, fn){
 7 
 8       if  (ele.addEventListener) {
 9 
10        ele.addEventListener(evt, fn,  false );    
11      }
12       else
13         if  (ele.attchEvent) {
14 
15          ele.attchEvent( ' on '   +  evt, fn);
16        }
17         else  {
18   
19          ele[ ' on '   +  evt]  =  fn;
20        }
21    };
22 
23     function  func_test(){
24   
25      not_existfunc();
26    }
27 
28    $(document).ready( function (){
29 
30       //  code 02
31       var  jsbutton03  =  document.getElementById( ' jsbutton_original_id03 ' );
32      jsbutton03.onclick  =  func_test;
33 
34       //  code 03
35       var  jsbutton02  =  document.getElementById( ' jsbutton_original_id02 ' );
36      addEventhandler(jsbutton02,  ' click ' , func_test);
37 
38       //  code 04
39      $( ' #jqbutton_standard_id01 ' ).click(func_test);
40    });
41 
42    window.onerror  =   function (){
43 
44       return   true ;
45    };
46  </ script >
47  ... ...
48  < body >
49     < input  id ="jsbutton_original_id01"  type ="button"  onclick ="func_test();"   />   <!--  code 01  -->
50     < input  id ="jsbutton_original_id02"  type ="button"   />
51     < input  id ="jsbutton_original_id03"  type ="button"   />
52     < input  id ="jqbutton_standard_id01"  type ="button"   />
53  </ body >
54  ... ...
55  < script  type ="text/javascript" >
56 
57     //  code 05
58    $(document).ready( function (){
59 
60       /*
61       * 在这里编写代码，目标是在不改变上面代码的情况下对Code 1 ~ 4 的里的事件进行“手术”。
62       * 手术的要求是:
63       * Code 1 ~ 4 里的触发的OnClick行为会触发func_test方法，该方法会触发一个不存在的方法not_exist();
64       * 要求对其增加try/catch，再catch里捕获此错误。
65       * 这里我提供 Code 1, 2 的改写方法，浏览器的兼容程度只需要考虑主流的IE6，7，8和FireFox3+即可，Chrome，Safari，Opera可以不考虑。
66       * 代码可以使用jq代码，也可以使用js代码实现。
67        */
68 
69       //  hijack code 01
70       var  original_sorce_01  =  $( ' #jsbutton_original_id01 ' ).attr( ' onclick ' );  //  typeof original_source_01 is function
71      $( ' #jsbutton_original_id01 ' ).removeattr( ' onclick ' ).click( function (event){
72 
73       try {
74 
75        original_sorce_01();
76      }  catch  (ex) {
77 
78         //  code... ...
79      }
80    });
81 
82       //  hijack code 02
83       var  jsbutton02  =  document.getElementById( ' jsbutton_original_id02 ' );
84       var  original_source_02  =  jsbutton02.onclick;
85      jsbutton02.onclick  =   function (){
86   
87         try {
88 
89          original_source_02();
90        }  catch  (ex) {
91 
92           //  code... ...
93        }
94      };
95    });
96  </ script >
97  </ html >
98 
99 

 

遵循以上的思路，有没有人可以帮助我写一下hijack code 03 和 hijack code 04的代码？或者提供其他解决途径呢？
1，既有代码是绝对不能修改的。
2，如果可以，扩展js原始类也是允许的。
3，func_test和not_existfunc是事先不知道的，只能通过“获取”得到。
4，最终的目的我需要知道错误发生的错误对象，方法名和事件、参数，基于此目的，其他解决方案也是可以的。
5，不能使用firebug之类的客户端调试工具。来让这类工具告诉你“代码错了”。