Обработка события внутри события

[grifangel]

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

b.onmousedown = function()
{
b.onmousemove = function()
{

}
}

?

Как такое можно сделать через слушателя событий? Спасибо.

[Aetae]

Чтоб не плодить для разных объектов лишних слушателей обычно делается так.
А так и приведённый вами подход для единичных случаев подходит, нет никаких сложностей в смене el.onfoo = bar на el.addEventListener('foo', bar, false) .

[Tek]

По человечески это пишеться так:

var mDown = false;
b.onmousedown = function(){ mDown = true; };
b.onmousemove = function(){if(mDown ){}};
b.mouseup = function(){ mDown = false; };

Можно сделать ещё хардкорней https://developer.mozilla.org/en-US/...eEventListener или используя jquery методы on off

[WorM32]

Чтоб не плодить для разных объектов лишних слушателей обычно делается так

var mDown = false;
b.onmousedown = function(){ mDown = true; };
b.onmousemove = function(){if(mDown ){}};
b.mouseup = function(){ mDown = false; };

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

<button id="test">нажми меня, держи и таскай</button>
<span id="result"></span>
<script>
var button = document.getElementById('test'),
    result = document.getElementById('result');
function mousemove(e) {
    result.innerHTML = e.pageX + ', '+ e.pageY;
}
function mouseup() {
    button.removeEventListener('mousemove', mousemove);
    button.removeEventListener('mouseup', mouseup);
}

button.addEventListener('mousedown', function () {
    button.addEventListener('mousemove', mousemove);
    button.addEventListener('mouseup', mouseup);
});
</script>

[grifangel]

Чтоб не плодить для разных объектов лишних слушателей обычно делается так.
А так и привидётнный вами подход для единичных случаев подходит, нет никаких сложностей в смене el.onfoo = bar на el.addEventListener('foo', bar, false) .

Скажите, чем плохо создание новых слушателей? Они больше памяти едят? Я по Вашей ссылке не нашел ответа на вопрос, может плохо смотрел, но в целом разобрался, спасибо.

[grifangel]

<button id="test">нажми меня, держи и таскай</button>
<span id="result"></span>
<script>
var button = document.getElementById('test'),
    result = document.getElementById('result');
function mousemove(e) {
    result.innerHTML = e.pageX + ', '+ e.pageY;
}
function mouseup() {
    button.removeEventListener('mousemove', mousemove);
    button.removeEventListener('mouseup', mouseup);
}

button.addEventListener('mousedown', function () {
    button.addEventListener('mousemove', mousemove);
    button.addEventListener('mouseup', mouseup);
});
</script>

Большое спасибо, это именно то, что я хотел увидеть.

[Aetae]

grifangel, в обычном случае - ничем особым. Но например mousemove или там scroll вызываются многократно на каждое движение, и если будет много обработчиков висеть - могут возникнуть тормоза. Особенно на несвежем железе. Потому правилом хорошего тона - в рамках одного функционала использовать один подобный слушатель, один таймер итд. Само собой без фанатизма.

По поводу того - где использовать on, а где add я придерживаюсь следующего мнения: on следует использовать там где обработчик единственный и при этом элемент создан вами и никак не должен обрабатываться сторонним кодом. В остальных случаях - add.

Сообщение от Aetae

Чтоб не плодить для разных объектов лишних слушателей обычно делается так.

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

А так и приведённый вами подход для единичных случаев подходит

В случае же когда объектов множество, неправилен как раз подход с кучей обработчиков.