有关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 相关文章推荐
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 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
基于mysql的论坛(3)
2006/10/09 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
Python-基础-入门 简介
2014/08/09 Python
寻找网站后台地址的python脚本
2014/09/01 Python
python实现简单的TCP代理服务器
2014/10/08 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
详解python开发环境搭建
2016/12/16 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
高一家长会邀请函
2014/01/12 职场文书
英语简历自我评价
2014/01/26 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
小学运动会入场词
2015/07/18 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
怎样写好工作计划
2019/04/10 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
Python 阶乘详解
2021/10/05 Python
Python四款GUI图形界面库介绍
2022/06/05 Python