[turboid] javascript solutions

Better Event Management for JavaScript

Now add event reactions afterwards or replace or drop them

In JavaScript you can tell the browser to do something as soon as the user does something or another event occurs. The most simple way to implement this is visible in the following example, which tells the browser to deliver a message every time the user clicks into the document:

document.onclick = function(e){
	alert("Yeah.");
};

Unfortunately, after a while of excessive using of such event handlers, a disadvantage appears in this way of declaring them. You may declare a reaction on a certain event and later want the browser to perform another reaction on the same event. That's still no problem, since you can simply overwrite the event handler with an new function. In the following example each click causes the message "Yeah.". After five seconds it shows another message, but the old message will not longer be shown.

document.onclick = function(e){
	alert("Yeah.");
};

setTimeout(function(){
	document.onclick = function(e){
		alert("New reaction: Yo.");
	};
}, 5000);

But what if you don't want to overwrite the old reaction, but only wish to add a second reaction which is released along with the first reaction each time the event occurs? - This is where Turboid comes in. (Though there are some solutions implemented in modern browsers, but the Turboid solution provides a higher cross-browser compatibility and some other advantages.) Turboid offers a special object called "Event", which in turn offers very useful functions allowing you to manage your event handlers in a quite comfortable way. In the following example each click causes the message "Yeah.". After five seconds it causes a second message, but along with it, it still causes the "Yeah"-message (though only after clicking the first message away) :

document.onclick = function(e){
	alert("Yeah.");
};

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("New reaction: Yo.");
	});
}, 5000);

You can add as many reacting functions as you want:

document.onclick = function(e){
	alert("First reaction.");
};

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("Second reaction");
	});
}, 5000);

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("Third reaction");
	});
}, 10000);

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("Fourth reaction");
	});
}, 15000);

If you give each added reaction a name, you can drop or replace a function by its name:

document.onclick = function(e){
	alert("First reaction.");
};

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("Second reaction");
	}, "alaska");
}, 5000);

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("Third reaction");
	}, "california");
}, 10000);

setTimeout(function(){
	Event.add('document.onclick', function(e){
		alert("Fourth reaction");
	}, "nevada");
}, 15000);


setTimeout(function(){
	Event.drop("california");
}, 20000);


setTimeout(function(){
	Event.set(function(){
		alert("Replaced!")
	}, "alaska");
}, 25000);

In order to use the extra functions, simply download the free Turboid framework and put it into the directory of your HTML file, then write this line into the head section of your HTML file, and that's it:

Have fun!