【javascript基础】mouseover和mouseenter mouseout和mouseleave的区别
2012-10-25 15:09 sniper007 阅读(233) 评论(0) 编辑 收藏 举报mouseenter() 方法 只有在鼠标指针经过被选元素时(不包括鼠标指针经过任何子元素),才会触发 mouseenter 事件。
mouseover ()方法在鼠标指针经过被选元素或者经过任何子元素时,都会触发 mouseover 事件。
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
demo :
<div id="wrap" style="padding:50px;background:red;">
<div id="inner" style="padding:50px;background:black;color:white;">444444444444</div>
</div>
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
$("wrap").addEventListener("mouseenter", function(){
console.log("mouseenter");
}, false);
$("wrap").addEventListener("mouseover", function(){
console.log("mouseover");
}, false);
</script>
<div id="inner" style="padding:50px;background:black;color:white;">444444444444</div>
</div>
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
$("wrap").addEventListener("mouseenter", function(){
console.log("mouseenter");
}, false);
$("wrap").addEventListener("mouseover", function(){
console.log("mouseover");
}, false);
</script>