HTMLDOM操作与事件处理指南

左键单击事件：

左键双击事件：

右键单击事件：

鼠标按键按下事件：

鼠标按键抬起事件：

鼠标移入事件：

鼠标移出事件：

鼠标移动事件：

焦点获取事件：

焦点失去事件：

输入事件：

表单提交事件：

键盘按下事件：

键盘抬起事件：

按键编码获取：

按键组合判断：

• ctrlKey：e.ctrlKey
• altKey：e.altKey
• shiftKey：e.shiftKey
• [示例]：

  if(e.ctrlKey && e.keyCode == 69) { console.log("Ctrl+E按下"); }

关键按键组合：

触摸事件：

• touchstart：触摸开始时触发事件
• touchend：触摸结束时触发事件
• touchmove：触摸元素在移动时触发事件

特殊事件：

• transitionend：当CSS过度结束时触发事件
• animationend：当CSS动画结束时触发事件
• [示例]：

        
         内容
        
    
  

长按事件：

const startTime = Date.now();  
const endTime = Date.now();  
const longPress = endTime - startTime > 1000;

获得事件对象：

function handleClick(e) {  
    e = e || window.event;  
    // 使用事件对象处理  
}

事件对象的常用属性：

• e.target：触发事件的标签对象
• e.tagName：触发事件的标签名称（大写）
• e.target.id：触发事件标签的id属性值
• e.target(attrName)：通过getAttribute获取指定属性值

事件对象的兼容问题：

• 低版本IE浏览器不支持e.target，需使用e.srcElement兼容语法。
• 按键编码部分需使用兼容代码：

  var key = e.keyCode || e.which;

获取触发事件的标签：

var targetElement = e.target || e.srcElement;

获取事件目标的相关信息：

• 标签名称：targetElement.tagName
• 标签id值：targetElement.id
• 统一资源标识符（URI）：targetElement.getAttribute('data-uri')

事件绑定兼容性：

• 标签绑定的事件函数需兼容window.event。
• 例如：

  element.onclick = function(e){  
      e = e || window.event;  
  }

冒泡事件机制：

• 当子级标签触发事件时，按浏览器不同，事件会向上的父级标签传播，直到触及document。
• [示例]：

        
    
    
         
    
      
          
           Inner
          
    
    
         
    
        
    
  

阻止事件传播：

• 使用e.stopPropagation()方法禁止事件传播。
• 低版本IE浏览器需使用e.cancelBubble = true;。
• [示例]：

  document.addEventListener('click', function(e){  
      if(e.stopPropagation){  
          e.stopPropagation();  
      }else{  
          e.cancelBubble = true;  
      }  
  });

事件传播的重要性：

• 父级事件处理程序可在子级事件处理之后执行。
• 有时需阻止事件传播以避免冲突或不必要的操作。

事件委托的概念：

实现方法：

// 事件目标判断  
divElement.addEventListener('click', function(e){  
    const targetElement = e.target;  
    if(targetElement.tagName == 'SPAN'){  
        // 处理 Span 标签的点击事件  
    }  
}

事件委托的优点：

• 避免了大量重复的for...in循环。
• 不管标签是否为动态生成的，都可以用父级标签处理事件。
• 代码更简洁，性能更优。

事件委托的适用场景：

• 处理动态生成的标签事件。
• 适合需要根据触发标签类型执行不同操作的情况。