Почему идентичные механизмы обработчиков событий выдают разные результаты?

Question

[coor]

Два идентичных подхода дают разный результат.
Если первый код отрабатывает нажатия строго в рамках объекта, то второй код почему то реагирует на всей области. Что нужно добавить во второй код, чтобы результаты сравнялись?

html

<div class="box" id="boxS">
            <ul class="visible" id="invis">
            </ul>
        </div>

код1:

document.getElementById('box1').onclick = function() {
    var list = this.getElementsByTagName('ul')[0];
}

код2:

var box1 = {
    initialize: function() {
        document.addEventListener('click',this.onClick.bind(this),false);        
    },

    onClick: function () {
      var getid = document.getElementById('box1');
      var list = getid.getElementsByTagName('ul')[0];
    }
};
box1.initialize();

Comments

[Lynn «Кофеман»]

В первом примере вы добавляете обработчик клика на конкретный элемент, а во втором на весь документ.

[coor]

А как во втором коде тогда добавлять event?

так не работает:

var box1 = {
    initialize: function() {
        box1.addEventListener('click',this.onClick.bind(this),false);        
    },