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.
Originally Posted by niklicht
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.
I see several different implied questions in this one question - altho they all overlap. For example:
how the "reusability" of functions called by event handlers is "ported" to the event-listener-way of binding functions to tags?
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.
Here is another example.