By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,626 Members | 1,750 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,626 IT Pros & Developers. It's quick & easy.

Removing in line javascript events

P: n/a
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

Jun 11 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
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()
{
// ...
}
}

Does this serve your needs?

Jun 11 '07 #2

P: n/a
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()
{
// ...
}
}

Jun 11 '07 #3

P: n/a
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?

Jun 11 '07 #4

P: n/a
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 :)

Jun 11 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.