On Jun 11, 4:29 pm, m0nkeymafia <m0nkeyma...@hotmail.co.ukwrote:
On Jun 11, 4:24 pm, Darko <darko.maksimo...@gmail.comwrote:
On Jun 11, 3:53 pm, m0nkeymafia <m0nkeyma...@hotmail.co.ukwrote:
I read about this technique to basically allow you to have a file with
behaviours and javascript events that attach to various dom objects
and events but are not done inline.
so its basically a css file but for javascript.
anyone know what it is called or where i can get more information
about it??
thanks
No, the technique looks like the following:
<html>
<script href="events.js"></script>
<body>
<div id="housing">
<!------------------------------------------->
</div>
<div id="humanitarian">
<!------------------------------------------->
</div>
</body>
</html>
// events.js:
document.onload = function()
{
document.getElementById( "housing" ).onclick = function()
{
// ...
}
document.getElementById( "humanitarian" ).onmousemove = function()
{
// ...
}
}
Ah brilliant thanks, is that safe to do [closures etc] ?
Or is it generally a bad technique?
Well, it is safe per se, but it is true that programmers are prone to
making mistakes in such contexts, such as not using "this" as they
should. For example, look at the following example, and think what's
the problem with it:
<html>
<script src="events.js"></script>
<body>
<div id="housing">
housing
</div>
<div id="humanitarian">
humanitarian
</div>
</body>
</html>
// events.js:
// instead of creating event handlers on the fly, i.e. in the big
document.onload function, we shall e.g. create an Event Handlers
Factory:
function EventHandlersFactory()
{
// the factory keeps track of how many event handlers it created
so far
this.nrEventHandlers = 0;
}
// the factory has only one method:
EventHandlersFactory.prototype.getEventHandler = function()
{
// it updates the attribute
this.nrEventHandlers++;
// and returns the function that will execute at the specified
moment. It should only alert the ordinal number of the event.
return function()
{
alert( "I am the " + this.nrEventHandlers + ". event handler
created" );
}
}
window.onload = function()
{
alert( "nesto" );
var ehf = new EventHandlersFactory();
document.getElementById( "housing" ).onclick =
ehf.getEventHandler();
document.getElementById( "humanitarian" ).onclick =
ehf.getEventHandler();
}
// question: what happens when you click on the "humanitarian"-box?
// Please note the two minor corrections inhere: it's not
document.onload but window.onload, and it's not <script href=""but
<script src=""... lapsus calami :)
