В чем разница двух кодов js?

Question

[Rufix]

var elem = document.getElementById('num');
elem.addEventListener('blur', func);

function func() {
	var sum = 0;
	var str = elem.value;
	var arr = str.split('');
  	for (var i = 0; i < arr.length; i++) {
		sum += +arr[i];
	}
	var newElem = document.getElementById('result');
	newElem.innerHTML = sum;
}

var elem = document.getElementById('num');
elem.blur = function(){
	var sum = 0;
	var str = elem.value;
	var arr = str.split('');
  	for (var i = 0; i < arr.length; i++) {
		sum += +arr[i];
	}
	var newElem = document.getElementById('result');
	newElem.innerHTML = sum;
}

Почему один код рабочий, другой нет?

Answer 1

[Ivan Bogachev]

Почему один код рабочий, другой нет?

Потому, что не blur, а onblur.

Comments

[Rufix]

Спасибо, не знал

[Алексей Лауд]

Rufix, еще одно важное отличие: первый код вешает новый listener на событие blur, а второй перезаписывает предыдущий, если он был.

Answer 2

[Борис Черепанов]

Потому, что во втором случае вы устанавливаете свойство объекта (elem.blur) и свойство равно функции.
Событие не срабатывает. Если например сделать

elem.blur = function(){
    console.log('--');
}
elem.blur(); // выведет '--'

Короче это не событие. Это вам не Window)