有关DOM元素与事件的3个谜题
有关DOM元素与事件的3个谜题
发布时间:2016-12-30 来源:查字典编辑
摘要:一、背景知识介绍通常为DOM元素增加事件有以下几种办法:1,硬编码形式2,事件监听3,JS框架提供的事件绑定1,硬编码形式,采用的是原始事件...

一、背景知识介绍

通常为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" /> <>

<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教程学习
编程开发子分类