有关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中for-in遍历方式示例介绍
Feb 11 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
react 组件传值的三种方法
Jun 03 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
vue实现几秒后跳转新页面代码
Sep 09 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
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP Directory 函数的详解
2013/03/07 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python中的数学运算操作符使用进阶
2016/06/20 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Python input函数使用实例解析
2019/11/22 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
python将图片转base64,实现前端显示
2020/01/09 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
求职信模板怎么做
2014/01/26 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技