Question

Suppose I have a <select> element on my HTML page, and I want to run some Javascript when the selection is changed. I’m using jQuery. I have two ways to associate the code with the element.

Method 1: jQuery .change()

<select id='the_select'>
<option value='opt1'>One</option>
<option value='opt2'>Two</option>
</select>

<script>
$('#the_select').change(function() {
  alert('Changed!');
});
</script>

Method 2: onChange attribute

<select id='the_select' onchange='selectChanged();'>
<option value='opt1'>One</option>
<option value='opt2'>Two</option>
</select>

<script>
function selectChanged() {
  alert('Changed!');
}
</script>

I understand the different modularity here: for example, method 1 keeps code references out of the HTML, but method 2 doesn’t need to mention HTML ids in the code.

What I don’t understand is: are there operational differences between these two that would make me prefer one over the other? For example, are there edge-case browsers where one of these works and the other doesn’t? Is the integration with jQuery better for either? Does the late-binding of the code to the event make a difference in the behavior of the page?

Which do you pick and why?

Answer 1

Well, have a read about

unobtrusive javascript