Understanding event observe and Prototype

**niklicht** · Mar 19, 2007 12:19

Hi SitePoint/JavaScript.

This is a post about understanding principles of correct coding practise, and probably also about an example or two of how it can look. It may also be about pointing me to the right resource to read so please: be patient

Say I have this function defined:

function myFunc(par1,par2) {...}

I can call it as many times I want, passing the relevant params, with an event handler:

onchange="myFunc('apple','orange')"

Now, its my understanding - but please correct me here if I got that wrong - that recommended best practise is to get away from event handlers and keep all logic separate in the external JavaScript libraries, leaving only the markup in the display file. Plus it allows for coding very clean degrading in cases where JavaScript is turned off etc. etc...
All fine, I would like to go down this lane...

Using Prototype I can bind my function - myFunc - to a given tag id - myTagID - when the page loads like this (I think - it works at least):

Event.observe(window,'load',function() {
Event.observe('myTagID','change',myFunc);
});

But that binds the function to one specific tag id, and the params must be hardcoded into the function - so it seems to me. I'm sure I'm wrong here, I hope someone can explain this to me.

I can also bind my function to more than one tag by not using a tag id but iterating through the DOM for tag names. That method seems most useful when you want to add general functionality and, in particular, CSS styling to markup elements etc, but it still doesn't accomplish what the event handler method does: that each function call passes its own, unique params.

So because of my limited understanding - both of JavaScript and of what I can do with Prototype - it seems to me that the event observer method is less flexible and actually less "abstracted" since I don't see how I can reuse functions only changing the params.

Thanks a lot in advance, Nikolaj

**7stud** · Mar 19, 2007 12:37

I suggest you spend your time learning js instead of a framework. Then you won't have to try to figure out how someone else's functions work--you can write your own to do whatever you want.

**niklicht** · Mar 19, 2007 13:20

Hi 7stud,

Thank you for replying. I do take your point and maybe I should have put my question differently. Because, heck, I would be fine to figure this out in "pure" JavaScript and not relying on Prototype. However, I don't see any problem in using Prototype either...

JavaScript or Prototype - I guess my question remains the same: is someone willing to explain an obvious novice like me how the "reusability" of functions called by event handlers is "ported" to the event-listener-way of binding functions to tags?

I guess its about something very basic in JavaScript programming principles...

/nikolaj

**MikeFoster** · Mar 20, 2007 09:57

Hi Nikolaj,

Originally Posted by niklicht

I guess its about something very basic in JavaScript programming principles...

I think there is alot of confusion on this topic. It is true that we want to physically separate our Js and HTML. However, we should not let that lead us to separate the Js and HTML in our thinking - that is, in our design. Much of the Js we write is for the purpose of a page enhancement: the Js is intended to work with a specific html structure (or a group of related structures). So, we can't really talk about event listeners unless we also talk about the corresponding html.

I do realize that there are times when we develop Js that has nothing to do with the html - but that's not the kind of code we are talking about here.

how the "reusability" of functions called by event handlers is "ported" to the event-listener-way of binding functions to tags?

I see several different implied questions in this one question - altho they all overlap. For example:

1. How event listeners can be associated with specific elements (or specific groups of elements) and how to do this in script (at runtime) instead of using a string of script in an html event attribute;

2. How to associate specific data with specific elements and specific events.

3. How to make the listeners "reusable", that is, how to abstract them somewhat so that they apply to more than just one element and one set of data.

First, let me just give links to two threads where the original code that was posted was using strings of script in html event attributes. In my responses you can see how I redesigned their Js/HTML relationships based on some of the principles we are discussing here.

Here is an example.

Code:

<a href="test1.html" title="test1" onmouseover="javascript:ShowContent('01box');HideContent('mainbox');HideContent('02box');HideContent('03box');HideContent('04box')" onmouseout="javascript:ShowContent('mainbox');HideContent('01box');HideContent('02box');HideContent('03box');HideContent('04box')"><img src="test1.jpg" width="176" height="225" border="0" /></a>

Here is another example.

Code:

<dd><a href="javascript:switchid('topHomes');" title="Top Homes"><strong>Homes</strong></a></dd>

**niklicht** · Mar 22, 2007 20:56

Hi Mike Foster

Thank you very much for taking time to write an answer to my confused thoughts

I should like to apology severely for not reacting immediatly, its simply due to a very stressy double-work situation I am in at the moment.

Originally Posted by MikeFoster

So, we can't really talk about event listeners unless we also talk about the corresponding html.

Makes totally sense, thanks for pointing it out.

Originally Posted by MikeFoster

2. How to associate specific data with specific elements and specific events.

3. How to make the listeners "reusable", that is, how to abstract them somewhat so that they apply to more than just one element and one set of data.

Yes, those two are probably the best way to put what I was trying to say...

I looked at the posts and examples you pointed me to, and there is _so_ much for me to learn in those that this is what I'll do first. I'm simply not enough advanced to get what you are doing in there right away, I have to decipher it bit by bit. Your reply of course also lead me to Cross-Browser.com which - shame on me

- was new to me, and there is also stuff in there for weeks

I'm re-reading some chapters in The Javascript Anthology as well...

What I do get (I think...

) is that most used is to bind DOM 0 event handlers, not the WC3 listeners...

Thank you again for taking time, its extraordinarily inspirering and encouraging to be guided by a master like you

/nikolaj

**wysiwyg** · Mar 23, 2007 01:24

Yup, DOM 0 event handlers is mostly used, mainly because all browsers doesn't support W3C listeners. And, maybe the most important, when you use attachEvent in IE, "this" points to the window object, and not the element which has the event attached to it, and that is extremely annoying. Sure, you could get the element from window.event.srcElement, but then you don't know if it's the actual element, or if it's any of it's child nodes.