Событие на document
 

Здравствуйте.

Имеется некий класс с несколькими методами. + Довольно стандартные строки навешивания события на элемент.

Код JS.

function Widjet() {
    this.id = null;
    this.jqlink = null;
    this.type = null;
    this.add = function () {
    };
    this.remove = function () {
    };
    this.copy = function () {
    };
    this.lock = function () {
    };
    this.unlock = function () {
    };
    this.edit = function () {
    };
    this.activate = function () {
        $(document).on('click', function () {
            console.log('123');
        });
    };
    this.deactivate = function () {
    };
    this.hovered = function () {
    };
    this.dehovered = function () {
    };
    this.getSerialize = function () {
    };
    this.load = function () {
    };
}
var widjet = new Widjet();
$(document).ready(function () {
    $('#button').click(function () {
        widjet.activate();
    });
});

Описание:
При клике на элемент #button, вызывается метод activate, внутри которого вешается событие на document. При последующих кликах на document в консоль должно выводиться 123.

Проблема:
При первом клике на #button в консоль сразу выводится 123, но по логике не должно, т.к. событие на document еще не висит. В чем может быть проблема?

Событие click - "всплывающее". Оно проходит последовательно вверх по всем предкам элемента, достигая document и window. Таким образом когда событие обрабатывается самим элементом ты навешиваешь обработчик на document, затем событие всплывает постепенно до document и обрабатывает тот самый обработчик.

Остановить всплытие можно через event.stopPropagation()

Методы лучше в прототип вынести. А если widget будет всего в одном экземпляре, то тебе и конструктор не нужен, и прототип тоже - сразу создавай объект с нужными свойствами/методами. Хотя это на любителя.

Виджет будет в одном экземляре, как супер объект. От него уже будут наследоваться остальные классы, методы в которых будут "перебиваться". Объектов остальных классов будет несколько.

var widjet = new Widjet();//супер объект
Headline.prototype = widjet;//наследование заголовка от виджета

P.S. Вообще, это мой первый проект завязанный на JS, обычно хватает jQuery за глаза. Поэтому прошу особо не ругать за кривизну кода :)

Не логично. когда он кликает по баттон, событие на документ еще не повешено. Это косяк компилятора скорей всего.

Я тоже думаю, что не логично, т.к. действительно событие на document еще не висит. Тем не менее остановил всплывание при помощи e.stopPropagation();

e.stopPropagation();
        $(document).on('click', function (e) {
            console.log('123');
        });

Помогло.

По поводу наследования button от document:

danik.js имел в виду несколько другое. При клике на button событие поднимается до document. Т.е. проходит по всем родительским элементам, насколько я понял.

Тогда нах*я ты городишь класс для него?

Допустим, оно проходит до документ, но на документ в этот момент (первого прохода), событие ЕЩЕ НЕ ВИСИТ.

Наследоваться остальные классы от чего будут?
Есть класс виджет - у него есть методы(пример: добавить, удалить, изменить, заблокировать и т.д.)

Есть классы наследники - параграф и заголовок. У классов наследников изменяются только методы добавления и изменения, остальное поведение остается прежним.

В чем моя ошибка?

Я понимаю, и как писал ВЫШЕ, считаю, что в консоль(при первом проходе) выводиться ничего не должно.

От объекта будут наследоваться. Глупо создавать класс ради одного экземпляра. В JS вообще классы не нужны, по большому счету, классы в нем как сахар для неполноценных Жаба-лайк созданий, не способных понять Ъ:)

Ошибки, как таковой нет, ошибка концептуальная, эскалация сложности. Для сраной жабы и плюсов, данное решение единственно верное, из-за кривизны дизайна там по другому сделать проблематично. А у js модель ООП растет из Self -- мощного и простого языка. Для js есть намного более изящное решение.

widget={
foo: "bar",
clone: function(){return Object.create(this)}
}
paragraph=widget.clone()
paragraph.bar="two"
H1=widget.clone()
H1.bar="two"
H2=H1.clone()
H2.bar="three"

console.log(paragraph.foo, paragraph.bar, H1.foo, H1.bar, H2.foo, H2.bar)
//  bar two bar two bar three