重叠滚动事件和滚轮事件时出现无法理解的行为

Question

window.addEventListener("wheel",function(){
  console.log("wheel");
  window.addEventListener('scroll', function(e){
    console.log("scroll");
  });
})

第一次操作鼠标滚轮时，我觉得只显示“滚轮”，window.addEventListener("scroll",function(){...})只需要注册即可。不过看输出结果，“wheel”和“scroll”是同时输出的

2.

window.addEventListener("scroll",function(){
  console.log("scroll");
  
  window.addEventListener('wheel', function(e){
    console.log("wheel");
  });
});

第一次操作鼠标滚轮时，不出所料只输出“scroll”。但是，如果再次操作，则按“轮”“滚动”的顺序输出。为什么轮子先输出？

Answer 1

为了更好地理解这一点，我提供了，

<body style="height: 150vh;">

请在视图中按“向下箭头”并查看控制台。只会打印“滚动”。--> 它不会触发滚轮，

但是如果你使用“鼠标滚轮”来滚动，你会在控制台中看到“滚轮”和“滚动”的输出。,

更多信息：

滚动当用户以任何方式（箭头键、滚动条或鼠标滚轮）滚动元素时触发。您无法阻止滚动。

轮子当用户使用鼠标滚轮时触发。您可以阻止此事件的默认值。请注意，页面不必滚动即可触发此事件。

window.addEventListener("scroll",function(){
  console.log("scroll");}); 

  window.addEventListener("wheel",function(){
    console.log("wheel");});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body style="height: 150vh;">
  <h1>test</h1>
    <script src="test.js"></script>
</body>
</html>

重叠滚动事件和滚轮事件时出现无法理解的行为

Unintelligible behavior when overlapping scroll events and wheel events

javascript

dom-events