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


Posted in Javascript onNovember 11, 2010

一、背景知识介绍
通常为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之类的客户端调试工具。来让这类工具告诉你“代码错了”。
Javascript 相关文章推荐
Javascript中Eval函数的使用
Mar 23 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 #Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 #Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 #Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 #Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 #Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 #Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 #Javascript
You might like
php5.3 废弃函数小结
2010/05/16 PHP
php实现webservice实例
2014/11/06 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
理解javascript封装
2016/02/23 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python基础篇之初识Python必看攻略
2016/06/23 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
python读取和保存视频文件
2018/04/16 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
英文版餐饮运营管理求职信
2013/11/06 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
春游踏青活动方案
2014/08/14 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
个人先进事迹材料
2014/12/29 职场文书
学习经验交流会总结
2015/11/02 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
JavaScript 定时器详情
2021/11/11 Javascript