offsetWidth/clientWidth/scrollWidth区别，mouseover/mouseenter

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

• offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
• clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
• scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

 

mouseover/mouseout与mouseenter/mouseleave的区别与联系

1. mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持
2. mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能
3. 标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

例子：鼠标从div#target元素移出时进行处理，判断逻辑如下：

<div id="target"><span>test</span></div>

<script type="text/javascript">
var target = document.getElementById('target');
if (target.addEventListener) {
　　target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
　　target.attachEvent('onmouseout', mouseoutHandler);
}

function mouseoutHandler(e) {
　　e = e || window.event;
　　var target = e.target || e.srcElement;

　　// 判断移出鼠标的元素是否为目标元素
　　if (target.id !== 'target') {
　　　　return;
　　}

  // 判断鼠标是移出元素还是移到子元素
  var relatedTarget = event.relatedTarget || e.toElement;
  while (relatedTarget !== target && relatedTarget.nodeName.toUpperCase() !== 'BODY') {
    relatedTarget = relatedTarget.parentNode;
  }

  // 如果相等，说明鼠标在元素内部移动
  if (relatedTarget === target) {
    return;
  }

  // 执行需要操作
  //alert('鼠标移出');
}
</script>