javascript - Multiple event listener use: Assign unique data to each element? -

i need register single-purpose event listener multiple html elements (e.g. change, click), in loop. need way differentiate between target elements when event fires. ideally listener should have variable changes depending on element fires event.

a straight-forward solution set id attribute in loop (jsfiddle), , refer this.id within handler. or if additional fields required, data-* attributes, , instead accessing this.dataset.id.

however these end adding actual markup of page, , can store strings. if have lot of data assign, of specific types other string, can impractical, , require unnecessary type checking, or integer parsing.

i got around defining new property called param on each html element, , access in handler so: this.param.address. turns out bad idea - 'feature' not relied on due browser consistencies , lack being in standard.

another way supplying arguments listener through closure (jsfiddle). downside of method returns unique listener each element, might affect performance versus single handler.

yet method had thought of storing actual element references data in array, , performing lookup of this event handler (jsfiddle).

so question is: is there better (and correct/future-proof) way pass/assign data element event handlers, without having store attribute string?

p.s. don't want have rely on jquery either.

with jquery it's possible use $(el).bind("click", {foo:i}, buttonclicked) , $.data(el, "param", {foo:i}) accomplish task. seems rely on being able set custom property element's object, proposed using param custom property purposes. mean it's fine long property name unique enough?...