JS event handler with custom html attributes

Question

I am revisiting/learning/unlearning what I thought I knew about custom attributes. Most of the information I've found here is a discussion of whether they are 'acceptable' or not, but I haven't seen a discussion of my question:

If you have a collection of elements to be handled by a common event handler (say a collection of thumbnail versions of pictures, or product detail thumbnails that when clicked would populate a main product details panel), what would be the preferred method of doing this without using custom attributes, if that is not a valid approach?

Say you wanted an onclick handler that would pass a parameter to a web service, and you were storing that parameter in an attribute "productDetail", e.g:

<img src="couchthumb.jpg" productDetail="couch_95" />

And you wanted to do this for each of the thumbnails on your couches page.

What is the better approach if not to do it this way?

Pointy · Accepted Answer · 2011-12-05 21:16:22Z

1

In HTML 5, you can use "data-" attributes:

<img src='couchthumb.jpg' data-product-detail='couch_95'>

All attributes of that form are valid attributes (in HTML 5).

Another approach (if you're concerned about doing things "right", whatever that means to you) is to use the "class" attribute for things like that:

<img src='couchthumb.jpg' class='productDetail:couch_95'>

Your code would have to pull the value out with a regex or something.

answered Dec 5, 2011 at 21:16

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monkeydeus Over a year ago

Right, and thanks. What is tripping me up though, is for those who say you shouldn't use custom attributes because there should be other XHTML-compliant ways of doing it, is, what are those ways? So if the data-* attribute is just a legitimizing of something people said was a bad practice in the first place, what is a different way of doing it? By different, I do mean a best practice, because I can imagine a scheme where you have an intelligent name in the id, and parse the function parameter out of that or something, but I wouldn't think that is a best practice.

Collectives™ on Stack Overflow

JS event handler with custom html attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related