Home > Developer > JavaScript
I. background knowledge
There are several ways to add events to DOM elements:
1. Hard Encoding
2. event listening
3. Event binding provided by the JS framework
1. hardcoded format: the Original Event format.
The code is similar to the following:
Copy codeThe Code is as follows:
<Element onclick = 'func (); '/>
Document. getElementById ('element _ id'). eventName = func ();
2. event listening mechanism. This method is based on the DOM event mechanism, which is divided into the standard DOM event model addEventListener and the IE event model attchEvent.
The code is similar to the following:
Copy codeThe Code is as follows:
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. Event binding mechanism provided by the JS framework. Here we use the jQuery framework.
The code is similar to the following:
Copy codeThe Code is as follows:
$ ('Element _ id'). bind ('eventname', function (event) {code ...});
$ ('Element _ id'). click (function () {code ...});
2. puzzles
The puzzle is as follows:
Copy codeThe Code is as follows:
<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 (){
/*
* Write the Code here. The goal is to perform Code 1 ~ without changing the Code above ~ 4 ".
* The operation requirements are:
* Code 1 ~ The OnClick action in 4 triggers the func_test method, which triggers a non-existent method not_exist ();
* Add try/catch to it and catch the error again.
* Here I provide the rewrite Method for Code 1 and 2. To ensure browser compatibility, you only need to consider mainstream IE6, and FireFox3 +. Chrome, Safari, and Opera can be ignored.
* The code can be implemented using jq code or js Code.
*/
// 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>
Following the above ideas, can anyone help me write the code of hijack code 03 and hijack code 04? Or other solutions?
Following the above ideas, can anyone help me write the code of hijack code 03 and hijack code 04? Or other solutions?
1. The existing Code cannot be modified.
2. If possible, expansion of the original js class is also allowed.
3. func_test and not_existfunc are unknown in advance and can only be obtained through "get.
4. For the final purpose, I need to know the error object, method name, event, and parameter of the Error. For this purpose, other solutions are also supported.
5. Client debugging tools such as firebug cannot be used. To let these tools tell you "the code is wrong ".
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
