Passive Event Listeners
If I click the menu icon, chrome shows a warning in the console: [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event hand
Solution 1:
This is just a problem with Chrome. It happens even with only <select></select> and no event listeners. Chrome automatically logs whenever a scroll-blocking event occurs .
Using Chrome's DevTools, I checked that there is no mousewheel listeners on the select box, and it still happens.
I suggest turning off 'Verbose' in the console.
Solution 2:
If you don't need to use .preventDefault() or do something, that has to occur, before the event ends, you should use the passive option in .addEventListener(), which doesn't block the event while your listener executes.
So your code would look like:
function loadMenuBasedScript() {}
var getMenuDependentValues = "";
window.addEventListener("DOMContentLoaded", function() {
document.getElementById("selectMenu").addEventListener('change', function() {
menuSelected = this.value;
loadMenuBasedScript(menuSelected, getMenuDependentValues);
}, {
passive: true
});
}, false);<body>
<div>
<select id="selectMenu">
<option value="one">One</option>
<option value="two">Two</option>
</select>
</div>
</body>
Post a Comment for "Passive Event Listeners"