Event handlers in JavaScript for a progressively enhanced `select` element

Viewed 223

I have a progressively enhanced <select> element in HTML.

It uses the following form,

<ul>
  <li></li>
  <li></li>
  ...
</ul>

With the current implementation, the click event handler is attached to every li element.

Will this create a problem when you have, say, about 1000-2000 elements, will it be slower as compared to attaching a single event handler to the <ul> and picking necessary information from e.srcElement?

Current implementation:

There is the whole list of

<div>
  <select>
    //1000-2000 elements
    <option> </option>
  </select>
  <ul>
    //Mapping the values of the 1000-2000 option tags
    <li> </li>
  </ul>
</div>

The click event handler maps the selected li to its equivalent option, sets that as the selected item and triggers the change event for the select.

4 Answers
Related