JS обработчик событий с пользовательскими атрибутами html

Question

Я пересматриваю / изучаю / отменяю то, что я думал о пользовательских атрибутах. Большая часть информации, которую я нашел здесь, является обсуждением того, являются ли они «приемлемыми» или нет, но я не видел обсуждения моего вопроса:

Если у вас есть набор элементов, которые должны обрабатываться общим обработчиком событий (например, набор миниатюрных версий изображений или миниатюр деталей продукта, которые при нажатии заполняют основную панель сведений о продукте), какой метод предпочтительнее делать это без использования пользовательских атрибутов, если это не правильный подход?

Скажем, вам нужен обработчик onclick, который будет передавать параметр в веб-службу, и вы сохраняли этот параметр в атрибуте "productDetail", например:

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

И вы хотели сделать это для каждой миниатюры на странице вашего дивана.

Какой подход лучше, если не делать это таким образом?

Answer 1

В HTML 5 вы можете использовать атрибуты "data-":

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

Все атрибуты этой формы являются допустимыми (в HTML 5).

Другой подход (если выВы заботитесь о том, чтобы сделать вещи «правильно», что бы это ни значило для вас), это использовать атрибут «class» для таких вещей:

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

Ваш код должен будет вывести значение с помощью регулярного выраженияили что-то.