Я хочу вызвать событие, когда моя мышь входит в div, и отдельное событие, когда оно покидает div, используя jQuery.Я знаю, что существует множество плагинов, примеров кода и т. Д., Которые решают эту конкретную проблему.Мне просто любопытно, какой способ будет наиболее эффективным с точки зрения как производительности, так и управления памятью.
Так, например, предположим, что у нас есть HTML-код, подобный следующему:
<div class="mouse-trap"> 1 </div>
<div class="mouse-trap"> 2 </div>
...
<div class="mouse-trap"> n-1 </div>
<div class="mouse-trap"> n </div>
1.Отдельные события
Мы можем поддерживать события отдельно.Этот код читабелен и с ним легко работать.
$(".mouse-trap").bind('mouseenter', function() {
// mouse came in
});
$(".mouse-trap").bind('mouseleave', function() {
// mouse left
});
2.Вложенные события
Вместо того, чтобы постоянно хранить событие «mouseleave», создавайте его только тогда, когда это необходимо, и затем удаляйте его, когда мы закончим, поскольку для каждого указателя мыши будет только одно событие Mouseleave.event.
$(".mouse-trap").bind('mouseenter', function() {
// mouse came in
$(this).one('mouseleave', function() {
// mouse left
});
});
В первом сценарии, если у вас есть n событий, это означает, что jQuery постоянно должен прослушивать nx 2 событий.
Во втором сценарии, предполагая, что элементы div не вложены друг в друга, вы прослушиваете только n + 1 событий в любой заданной точке.
Правда, я точно не уверен, сколько именно времени уходит на поиск событий, но я подозреваю, что от браузера к браузеру и от компьютера к компьютеру это будет иначе.Для относительно небольшого значения n это, вероятно, никогда не будет проблемой.Но что, если n было действительно большим?Будет ли заметная разница?
Теперь, как все изменится, если вы можете иметь div, вложенные друг в друга?
Например:
<div class="mouse-trap">
<div class="mouse-trap">
<div class="mouse-trap">
...
</div>
<div class="mouse-trap">
...
</div>
</div>
...
<div class="mouse-trap">
...
</div>
</div>
В худшем случае здесь будет n делений, вложенных друг в друга.
Поскольку они вложенные, я считаю, что событие "mouseleave" не будет вызванона внешних divs, как вы двигаетесь внутрь.В этом случае я считаю, что оба сценария должны будут отслеживать события nx 2 , но только при наведении курсора на самый внутренний элемент div.
Теперь возникает другой вопрос о том, сколько накладных расходов требуется для привязки и отмены привязки событий.Я думал, что прочитал некоторое время назад, что jQuery хранит все события в очереди, хотя я не смог найти конкретную документацию, подтверждающую это при исследовании этой проблемы.Таким образом, в зависимости от используемой структуры данных, очередь / очередь может иметь стоимость O (1) или O (n) ,Кто-нибудь знает специфику этого?
В сценарии 1 вы связываете все сразу, и вам больше не нужно с этим связываться (за исключением новых ловушек div.mouse, которые динамически добавляются на страницу).Это nx 2 привязок, которые имеют место.
В сценарии 2 вы только привязываете n событий заранее,но теоретически не может быть предела тому, сколько раз вы входите и выходите из области мышью.Это создает возможность для бесконечных необходимых привязок.Но в том же отношении мышь (и человек, управляющий этой мышью) могут двигаться только так быстро, поэтому эти привязки также распределяются в течение более длительного периода времени.Это может свести к минимуму влияние многочисленных привязок.
Все это говорит о том, что я думаю, что второй сценарий, вероятно, лучше, но я пропускаю что-то еще?Есть ли другие способы сделать это лучше, чем два, которые я перечислил?
Прошу прощения за длительность этого поста.Я просто хотел убедиться, что я подробно остановился на моем текущем процессе мышления.Я работаю над тем, что будет иметь большое количество событий мыши, и хочу убедиться, что я хорошо играю с системами людей.