What the purpose for change event what is blur not know?

As it fires only once when click out on input. So same do the blur event? Similar? Then what the advantage do something with change event what is blur not can make? As it fires two times so works same,

https://jsfiddle.net/rcznjyfq/

Thanks!

Hello!

The blur event should fire only when an element loses focus (when You go away), while the change event should fire only when the contents of the element change.

Now, when the element is an input, both events are triggered the same, except when the type is number or date and when the element is a select:

$('#selector').change(function() {
  //$('#selector').val($.trim($(this).val()));
  console.log('change');
});

$('#selector').blur(function() {
console.log('blur');
})

$('#s').change(function() {
console.log('s.change')
})

$('#s').blur(function() {
console.log('s.blur');
})

$('#num').change(function() {
 console.log('num.change');
})

$('#num').blur(function() {
 console.log('num.blur');
})

$('#date').change(function() {
console.log('date.change');
});
$('#date').blur(function() {
console.log('date.blur');
})
<input type="text" id="selector">
<select id="s">
<option>a</option>
<option>b</option>
</select>
<input type="date" id="date" />
<input type="number" id="num" />

See this example based on Yours :slight_smile:.

1 Like