Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.09.2014, 10:23
Интересующийся
Отправить личное сообщение для grifangel Посмотреть профиль Найти все сообщения от grifangel
 
Регистрация: 16.10.2013
Сообщений: 23

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

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

}
}

?

Как такое можно сделать через слушателя событий? Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 04.09.2014, 10:30
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,738

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

Последний раз редактировалось Aetae, 04.09.2014 в 11:37.
Ответить с цитированием
  #3 (permalink)  
Старый 04.09.2014, 10:32
Аватар для Tek
Tek Tek вне форума
Профессор
Отправить личное сообщение для Tek Посмотреть профиль Найти все сообщения от Tek
 
Регистрация: 22.02.2012
Сообщений: 212

По человечески это пишеться так:
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
Ответить с цитированием
  #4 (permalink)  
Старый 04.09.2014, 11:07
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Сообщение от Aetae Посмотреть сообщение
Чтоб не плодить для разных объектов лишних слушателей обычно делается так
Сообщение от Tek Посмотреть сообщение
По человечески это пишеться так:
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>
Ответить с цитированием
  #5 (permalink)  
Старый 04.09.2014, 11:13
Интересующийся
Отправить личное сообщение для grifangel Посмотреть профиль Найти все сообщения от grifangel
 
Регистрация: 16.10.2013
Сообщений: 23

Сообщение от Aetae Посмотреть сообщение
Чтоб не плодить для разных объектов лишних слушателей обычно делается так.
А так и привидётнный вами подход для единичных случаев подходит, нет никаких сложностей в смене el.onfoo = bar на el.addEventListener('foo', bar, false) .
Скажите, чем плохо создание новых слушателей? Они больше памяти едят? Я по Вашей ссылке не нашел ответа на вопрос, может плохо смотрел, но в целом разобрался, спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 04.09.2014, 11:18
Интересующийся
Отправить личное сообщение для grifangel Посмотреть профиль Найти все сообщения от grifangel
 
Регистрация: 16.10.2013
Сообщений: 23

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

<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>
Большое спасибо, это именно то, что я хотел увидеть.
Ответить с цитированием
  #7 (permalink)  
Старый 04.09.2014, 11:34
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,738

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

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

Сообщение от WorM32 Посмотреть сообщение
Сообщение от Aetae Посмотреть сообщение
Чтоб не плодить для разных объектов лишних слушателей обычно делается так.
Считаю, что это неправильный подход. Событие должно вешаться, когда его действительно нужно слушать и обрабатывать. ТС в данном плане мыслит правильно.
Сообщение от Aetae Посмотреть сообщение
А так и приведённый вами подход для единичных случаев подходит
В случае же когда объектов множество, неправилен как раз подход с кучей обработчиков.
__________________
29375, 35

Последний раз редактировалось Aetae, 04.09.2014 в 11:39.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение значения переменной внутри обработчика события jQuery Mbenga Общие вопросы Javascript 2 01.07.2013 09:57
Обработка события после закрытия модального окна byaka Events/DOM/Window 3 11.08.2012 18:19
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 16:01
Обработка события выделения текста cabelas jQuery 0 26.11.2009 14:03
Обработка события Deep Events/DOM/Window 12 29.07.2009 21:58