DEMO
As you can see I've used event delegation to attach appropriate event handlers. There are lots of benefits of using delegation instead of direct event handling such as:
1. Having more precise control of the event.
2. Handling events generated from 1000 items requires a delegation of 1 event handler to just 1 parent element of these items, which is far more efficient than the attaching an event handler to each of the 1000 items.
I've also got rid of all the callback / anonymous functions handling the events, which are now replaced by named functions. This way on each occurring event, no new function will be created/allocated in memory, instead the already defined named functions will be used. This is very useful especially if you must handle thousands of events requiring allocation of thousands new anonymous functions.
The small issues with Internet Explorer way of handling events are now also fixed. Enjoy!
function call_back(response, ret_el) {
document.getElementById(ret_el).innerHTML = response;
}
function orange_fade_over(ev) {
if (!ev.target) {
ev.target = ev.srcElement;
}
var t = ev.target;
if (t.tagName === 'LI') {
var that = t.id;
timer_id = setTimeout(function () {
var c_id = that.match(/id([0-9]+)/)[1];
if (cache_array.indexOf(c_id) == -1) {
makeGETRequest('get_comment.php?comment_id=' + c_id, that, call_back);
cache_array.push(c_id);
}
}, 250);
return false;
}
}
function orange_fade_out(ev) {
var t = ev.target;
if (t.tagName === 'LI') {
clearTimeout(timer_id);
return false;
}
}
var orange_table;
if (orange_table = document.getElementById('orange_fade')) {
var cache_array = [];
var timer_id;
if (orange_table.addEventListener) {
orange_table.addEventListener('mouseover', orange_fade_over, false);
orange_table.addEventListener('mouseout', orange_fade_out, false);
} else if (orange_table.attachEvent) {
orange_table.attachEvent('onmouseover', orange_fade_over);
orange_table.attachEvent('onmouseout', orange_fade_out);
}
}
function makeGETRequest(url, ret_el, callback_function) {
var cursor = document.getElementsByTagName("body").item(0).style.cursor;
var http_request = false;
var activex_ids = ['MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
for (i = 0; i < activex_ids.length; i++) {
try {
http_request = new ActiveXObject(activex_ids[i]);
} catch (e) {}
}
}
if (!http_request) {
alert('Please update your browser!');
return false;
}
var return_el = document.getElementById(ret_el);
if (return_el !== null) {
return_el.innerHTML = "...";
}
cursor = "wait";
http_request.onreadystatechange = function () {
if (http_request.readyState !== 4) {
return;
}
if (http_request.status !== 200) {
alert('Error occurred while processing your request. Please try again later.');
cursor = "auto";
return;
}
cursor = "auto";
var response = http_request.responseText;
callback_function(response, ret_el);
return;
};
http_request.open("GET", url, true);
http_request.send(null);
}
by
Nevyan Neykov
Post a Comment