事件mouseenter和事件mouseleave

为了鼠标操作起来方便,IE实现了mouseentermouseleave 事件,不过ExtJs实现了其他浏览器对这两个事件的支持。如果框架中没有用到ExtJs,可以参考ext-base-event.js中的自己实现。


      mouseenter不同于mouseover(鼠标经过),它是在第一次鼠标进入节点区域时触发,以后在节点区域内(子节点间)移动时不触发,而onmouseover由于事件冒泡机制,每次移到不同的节点上都会触发,经常不能实现预期的效果。同理 mouseleave与 mouseout(鼠标移出)也类似

      关于这两个事件的详细介绍,可参考Goodbye mouseover, hello mouseenter    该文章详细的介绍了这两个事件的实现与使用好处

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>事件mouseenter和事件mouseleave</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<table width="500" border="1"  onmouseleave = "javascript:alert('鼠标离开table');" >
			<tr>
				<td onmouseenter = "javascript:alert('鼠标进入td');">
					鼠标进入
				</td>
				<td onmouseleave = "javascript:alert('鼠标离开td');">
					鼠标离开
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
			</tr>
		</table>
		<br>
		
		<table width="500" border="1"  onmouseout="alert('鼠标移出')" onmouseover="alert('鼠标经过')" >
			<tr>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
			</tr>
		</table>
	</body>
</html>

 

 

 

你可能感兴趣的:(JavaScript,html,框架,IE,ext)