Почему работает только 2 вариант (addEventListener)?

Question

[NickBetali]

Вариант 1
(function() {
var buttons = document.getElementsByTagName('button');
  for (var i = 0, len = buttons.length; i < len; i++) {  
    buttons[i].onClick = function () {
    if (this.id === 'day') {
      document.body.className = 'day';
    } else if (this.id === 'night') {
      document.body.className = 'night';
    }
  };
  };
})();

Вариант 2

(function() {
var buttons = document.getElementsByTagName('button');
var changeColor = function() {
     if (this.id === 'day') {
        document.body.className = 'day';
      } else if (this.id === 'night') {
        document.body.className = 'night';
      }
};
for (var i = 0, len = buttons.length; i < len; i++) {  
    buttons[i].addEventListener('click', changeColor, false);
    };
})();

2 примера простейшего кода, но 1 вариант почему-то не работает (последняя версия Chrome)

Answer 1

[Сергей Протько]

1) потому что второй способ более рассово верен
2) потому что не onClick а onclick.

Answer 2

[IceJOKER]

"как и все свойства объектов JavaScript, имя свойства onсобытие чувствительно к регистру символов и должно быть в нижнем регистре. "
javascript.ru/tutorial/events/intro

Answer 3

[Тарас Лабяк]

Да и onclick может быть только один

Comments

[Сергей Протько]

там он один и есть.

[IceJOKER]

если не ошибаюсь onclick может быть сколько угодно, только вот следующий onclick перезапишет предыдущий

[Тарас Лабяк]

Сергей Протько: да, но вряд ли человек об этом уже знает)

[Тарас Лабяк]

IceJOKER: А еще можно сделать сеттер onclick который будет регистрировать через addEventListener. Это может быть полезно, если нужно делать инъекции в чужой код