5.3DOM核心事件

核心事件类型

1. wheel：标准滚轮事件。当用户滚动鼠标滚轮或触控板时触发，事件对象包含滚动方向、速度等信息。需通过 addEventListener 监听

   deltaY	垂直滚动量（正值向下）	-120 或 120
   deltaX	水平滚动量（正值向右）	30

       <style>
           .scroll-container {
               width: 500px;
               height: 500px;
               overflow: auto;
               border: 1px solid pink;
           }
       
           body {
               height: 2000px;
           }
       </style>
       <div class="scroll-container" id="container">
           许多文字
       </div>
       <script>
           const container = document.getElementById('container');
           document.documentElement.addEventListener('wheel', (e) => {
   
               if ((container.scrollTop + container.clientHeight < container.scrollHeight) && e.deltaY > 0
                   || (e.deltaY < 0 && container.scrollTop > 0 && document.documentElement.scrollTop == 0)) {
                   e.preventDefault()
                   container.scrollTop += e.deltaY;
   
               }
   
           }, { passive: false });
       </script>

2. ​鼠标事件

   • click（单击）、dblclick（双击）、mousedown（按下）、mouseup（释放）、mouseover（移入）、mouseout（移出）等

   • 鼠标移动事件：
     
     支持冒泡的事件：
       ├── mouseover 
       ├── mousemove 
       └── mouseout 
      
     不支持冒泡的事件：
       ├── mouseenter 
       └── mouseleave

   • 示例：控制元素背景色变化

     box.onmouseenter = function() { this.style.backgroundColor = '#000'; };
     box.onmouseleave = function() { this.style.backgroundColor = ''; };

3. ​键盘事件

   • keydown（按下）、keypress（按住）、keyup（释放），可获取keyCode或key属性
   • 示例：限制输入为数字

     input.onkeypress = function(e) {
       if (e.keyCode < 48 || e.keyCode > 57) e.preventDefault();
     };

4. ​表单事件

   • submit（提交）、change（值改变）、focus（获得焦点）等，常用于表单验证
   • 示例：阻止表