Javascript-форум - stopPropagation

Javascript-форум (https://javascript.ru/forum/)

- ExtJS (https://javascript.ru/forum/extjs/)

- - stopPropagation (https://javascript.ru/forum/extjs/28240-stoppropagation.html)

в обычном js при любом событии передается объект event(при том же change)

var changeDiv = function(event)
	{
	event = event || window.event;
	event.preventDefault();
	//... действия
	}

Где его взять в Ext (4.0)?

xtype: 'numberfield',
fieldLabel: 'number',
value: 0,
labelWidth: 20,
width: 80,
listeners:
	{
	change: function(ths, newValue, oldValue, eOpts)
		{
		event = event || window.event;
		console.log(123);
		event.preventDefault();
		}
	}

незнаю верно ли понял вопрос.
Я знаю только два способа.

способ 1. (при навешивании обработчика на событие)
// предотвращаем всплывание

exl.on('click', this.onClick, this, {stopPropagation: true});

// предотвращает событие навешанное по дефолту

ex1.on('click', this.onClick, this, {preventDefault: true});

способ 2. (в обработчике)

function handleClick(event, target){  // обработчик события
     // предотвращает событие навешанное по  дефолту 
     event.preventDefault();  

    // предотвращает всплывание
    event.stopPropagation(); 

    // заменяет обе функции,предотвращает и всплывание  и дефолт  одновременно.
    event.stopEvent(); 
...
}

способ 3)
вот здесь я не уверен.
Я этого ненашёл в документации, но по логике это должно быть.

xtype: 'numberfield',
fieldLabel: 'number',
value: 0,
labelWidth: 20,
width: 80,
listeners:{	
	change: {
                stopPropagation: true,
                fn(ths, newValue, oldValue, eOpts){
                       ....
		}
	}
}

хм. отсюда взяли http://erum.ru/67.htm ?? я там уже был.
я не понимаю откуда берется handleClick(event, target)? когда должны передаваться эти параметры click( Ext.button.Button this, Event e, Object eOpts ) [http://docs.sencha.com/ext-js/4-0/#!...button.Button]
т.е.

listeners:
	{
	click: function(ths, e, eOpts)
		{
		//...
		}
	}

кстати при клике есть объект event, а при change - нет

угу, и не только оттуда.
вот ещё хороший источник http://podlipensky.com/post/2009/07/...js-events.aspx
ну и документация конечно.

я так понимаю что конечная цель предотвратить всплытие change. Ну как аварийный вариант попробуйте через on c опциями навешать.

Ещё один способ борьбы с пузырями return false; - в обработчике.

Сейчас тороплюсь, вернусь, покавыряю исходники с оф доками, тогда отпишусь точнее.

КХМ, поковырял.

Ext.EventObject - это обёртка над родным обьектом события в браузере, служит для повышения кросс браузерности. Тоесть где нет события браузера, там нет EventObject. Так как change инициируется не событием браузера то и EventObject к этому событию ни какого отношения не имеет.

что касается события Change вообще.
Генерация события происходит в методе checkChange класса numberfield
запуск этой функции инициализируется методами вроде setValue

checkChange: function() {
        if (!this.suspendCheckChange) {
            var me = this,
                newVal = me.getValue(),
                oldVal = me.lastValue;
            if (!me.isEqual(newVal, oldVal) && !me.isDestroyed) {
                me.lastValue = newVal;
                // вот здесь генерируется событие
                me.fireEvent('change', me, newVal, oldVal);
                me.onChange(newVal, oldVal);
            }
        }
    },

тобиш мы можем создать свой собственный класс customNumberfield унаследовав его от numberfield.
Далее можем переопределить checkChange и генерировать события в том виде в каком они нам удобны.
Вплоть до замены события вызвом функции, или генерации события только в определённых случаях.

.....
Теперь, что касается механизьма событий.

FireEvent() берёт информацию о событии из обьекта events
Кстатии сам он нечего не вызывает, а просто передаёт работу continueFireEvent который и обеспечивает всплытие в цикле do While. Цикл прерывается через break, если обработчик события возвращает false.

в events можно найти много чего вкусного.
к примеру
events[имя события].bubble - флаг отвечающий за всплытие.
events[имя события].listeners - массив с обработчиками этого события.

Если в двух словах пробежатся по всему алгоритму то.
1) continueFireEvent находит родителей по цепочке и вызывает для них метод Fire.
2) метод fire перебирае в цикле events[имя события].listeners и вызывает fireFn (функцию обработчик события)

До кучи отпишусь откуда берутся обработчики, вдруг кому интересно.

когда вы устанавливаете обработчик в listeners. ТО обьект listeners передаётся в конструкторе методу on. me.on(me.listeners);
То есть, установка обработчика через on и listeners, суть одно и тоже. (выходит я угадал во втором посте)

метод on в свою очередь это псевдоним метода addListener.

основная задача addListeners сводится к заполнению обьекта events.
addListeners в цикле перебирает те события которые вы ему передали (если их несколько)
добавление события происходит так.
me.events[ename] = event = new Ext.util.Event(me, ename); //ename - Имя события

Даже незнаю что ещё можно добавить ))

Написали много, спасибо, но все равно с трудом все в голову входит))) лучшая теория - это практика.
допустим у меня есть объект, который можно двигать (draggable: true) и есть событие move:

var fx = Ext.getCmp('numberfield_x');
move: function(ths, x, y)
	{
	fx.setValue(x);
	//запихиваем в numberfield_x значение икса
	}

и есть поле числовое, куда значения записываются. у него есть событие change. и при перемещении объекта срабатывает change (где мне этого не нужно)

xtype: 'numberfield',
id: 'numberfield_x',
fieldLabel: 'x',
value: 0,
labelWidth: 20,
width: 80,
listeners:
	{
	change: function(ths, newValue, oldValue, event)
		{
		console.log(1);
		}
	}

можете туго доходящему показать куда что и как прописать, чтобы в консоль эта единичка не записывалась т.е. не вызывалось событие из за перемещения другого объекта??)) буду оч рад))

тут вариантов 10 наверно)

ну вот самый, самый тупой

var flag=false;
var fx = Ext.getCmp('numberfield_x');
move: function(ths, x, y)
	{
        flag=true;
	       fx.setValue(x);
        flag=false;

	//запихиваем в numberfield_x значение икса
	}

xtype: 'numberfield',
id: 'numberfield_x',
fieldLabel: 'x',
value: 0,
labelWidth: 20,
width: 80,
listeners:
	{
	change: function(ths, newValue, oldValue, event)
		{
                      if (flag==false){
                           console.log(1);
                      }
		}
	}

Вместо глобального флага можно попробывать
fx.flag
this.flag

ну а если не самый тупой? просто у меня не хватает мозгов, чтобы все это сообразить)) то что вы ДО этого писали

Прошу прощения ))
тупой это не потому что кто то не понимает что то сложнее.
А тупой потому что, топорно простой.

о других чуть попозже.

ещё один способ избежать вызова события change которое происходит при вызове setValue
это отписаться от события на время присваивания.

выглядеть это будет так.

move: function(ths, x, y)
     //запомним обработчик события
     var ev=fx.events.change.listeners[0].fn;

     //отпишемся от события (при этом обработчик будет удалён, поэтому мы его предварительно сохранили)
     fx.un("change",ev);

     fx.setValue(x);

     // подписываемся на событие обратно, указав предварительно сохранённый обработчик 
     fx.on("change",ev);
}

Это требовалось ???

да это это. но все же (выражусь вашим понятием) метод топорный)) что в этом примере, что в том. хотелось бы одной строчкой отделаться, думаю знайте какой))

format c:
универсально решает многие проблемы :)

Если серьёзно, виноват, я не знаю такой волшебной строчки. Если узнаете дайте знать.