привязка и отвязка обработчика mousedown при mousedown и mouseup

У меня есть таблица html, в которой есть столбцы перетаскивания, строки с изменяемым размером и столбцы с изменяемым размером, которые изменяются в зависимости от нажатия мыши, перемещения мыши и перемещения мыши. Для повышения производительности должен ли я постоянно проверять документ, если «мышь не работает, и если да, то для перетаскивания, строк с изменяемым размером или столбцов с изменяемым размером» во время перемещения мыши или я должен прикрепить обработчики перемещения мыши к документу при наведении мыши в определенном месте, а затем отсоединить его при наведении мыши? Насколько дорого обходится привязка и отвязка обработчиков при нажатии? Вот пример документа, который всегда проверяет наличие нажатия кнопки мыши, а не только проверку между нажатием кнопки мыши и щелчком мыши:

/* document is always checking mousemove */

$(selector).mousedown(function(){
    dropndrag = true;
});

$(document).mousemove(function(){
    if (dropndrag == true) {
        //do mouse move stuff
    }
});

$(document).mouseup(function(){
    if (dropndrag == true) {
        dropndrag = false;
    }
});


/* mousemove only bound to document after mousedown */

$(selector).mousedown(function(){
    // attach handlers
    $(document).mousemove(mousemove); 
    $(document).mouseup(mouseup);
});

function mousemove(){
    // do mouse move stuff;
};

function mouseup() {
    //unbind mousemove and mouseup handlers
    $(document).off('mousemove', mousemove);
    $(document).off('mouseup', mouseup);
}

javascript binding jquery mousemove mousedown
person Rudy Gagneron    schedule 22.09.2014    source источник
comment
Я всегда предпочитаю проверять переменные, кажется быстрее!   -  person Amin Jafari    schedule 23.09.2014

Ответы (2)


arrow_upward
1
arrow_downward

Определенно привязка/отвязка - это лишние операции, которые, я уверен, медленнее, чем 1 переменная в "глобальном" контексте, где вы сохраняете ее статус. Также хорошей практикой считается наличие 1 прослушивателя документов для каждого события и фильтра, такого как «переключатель/кейс», который будет запускать функции только для определенных элементов, например:

var events = ['mousedown', 'mouseup', 'mousemove'];

var dragged = false; 

var eventHandler = function (e) {
    switch (e.type) {
        case 'mousedown':

            switch (e.srcElement.id) {
                case 'test-block':
                    if (dragged) return;
                    dragged = true;

                    console.log('you clicked on the test-block');
                    break;
            }

            break;
        case 'mouseup':

            break;
        case 'mousemove':

            break;
    }
};

for (var i = 0; i < events.length; i++) {
    $(document)[events[i]](eventHandler);
}
person Tengiz    schedule 22.09.2014

arrow_upward
0
arrow_downward

На самом деле, самым быстрым способом может быть делегирование событий: document.addEventListener('onmousemove', myEventHandler);

Хороший пример и обсуждение того, почему это быстрее всего, здесь.

Еще лучше было бы прикрепить прослушиватель событий к определенным объектам DOM, в вашем случае <div> или аналогичный, который обертывает вашу таблицу: document.getElementById("mydiv").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; (пример из здесь.)

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

person legendof    schedule 22.09.2014