Как понять, пассивный обработчик событий

114

21 апреля 2021, 15:00

Вот есть код, если докрутить до конца TEXTAREA то будет вылелать ошибка в консоли, https://codepen.io/mihail-nezemnoy/pen/vwQaZK

document.addEventListener('wheel', function(e) { 
  if (e.target.tagName != 'TEXTAREA') return; 
  var area = e.target; 
 
  var delta = e.deltaY || e.detail || e.wheelDelta; 
 
  if (delta < 0 && area.scrollTop == 0) { 
    e.preventDefault(); 
  } 
 
  if (delta > 0 && area.scrollHeight - area.clientHeight - area.scrollTop <= 1) { 
    e.preventDefault(); 
  } 
})

Как я понимаю, это связанно с пассивным обработчиком, а чтто это такое не могу понять, и в нете нашел решение проблеммы путем добавлления {passive : false}, но тоже не понимаю что это делает

Answer 1

у слушателя событий есть опция passive, которая указывает, что слушатель никогда не вызовет preventDefault(). Если все же вызов будет произведен, браузер должен игнорировать его и генерировать консольное предупреждение. Так вот по умолчанию её значение false, но для событий прокрутки wheel/mousewheel, которые добавлены на уровне документа window.document\window.document.body\window её значение по умолчанию равно true, что и генерирует предупреждение в консоли.

Связано это с улучшением производительности прокрутки - вот тут об этом подробнее https://developers.google.com/web/updates/2016/06/passive-event-listeners

В вашем случае можно сразу повесить событие на textarea, а не document, т.к. вы всё равно выполняете действие только, если событие происходит на textarea