有关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中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
深入分析javascript中console命令
Aug 14 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 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
与数据库连接
2006/10/09 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python交互式图形编程实例(三)
2017/11/17 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
采购员的工作职责
2013/12/26 职场文书
生产部主管岗位职责
2014/01/06 职场文书
买房子个人收入证明
2014/01/16 职场文书
致接力运动员广播稿
2014/02/17 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
出售房屋协议书范本
2014/10/06 职场文书
教师个人培训总结
2015/02/11 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS