onmouseover 、onmouseout和onmouseenter、onmouseleave的区别-简记

onmouseover、onmouseout：

1) onmouseover:鼠标进入元素时触发，onmouseout：鼠标离开元素时触发；

2) 特点：鼠标经过子元素时，其父元素的onmouseover、onmouseout事件也会触发，产生事件冒泡效果;

示例：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><script>function parentOver() {console.log("鼠标进入父div");}function parentOut() {console.log("鼠标离开父div");}function childOver() {console.log("鼠标进入子div");}function childOut() {console.log("鼠标离开子div");}</script>
</head>
<body><div id="parentDiv" onmouseover="parentOver()" onmouseout="parentOut()" style="background-color:yellow;width:250px;height:250px;padding:80px;"><div id="childDiv" onmouseover="childOver()" onmouseout="childOut()" style="background-color:limegreen;width:120px;height:120px;"></div></div>
</body>
</html>

onmouseenter、onmouseleave:

1) onmouseenter:鼠标进入元素时触发，onmouseleave：鼠标离开元素时触发；

2) 特点：鼠标经过子元素时，其父元素的onmouseover、onmouseout事件不会触发，不会产生事件冒泡效果;

示例：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><script>function parentOver() {console.log("鼠标进入父div");}function parentOut() {console.log("鼠标离开父div");}function childOver() {console.log("鼠标进入子div");}function childOut() {console.log("鼠标离开子div");}</script>
</head>
<body><div id="parentDiv" onmouseenter="parentOver()" onmouseleave="parentOut()" style="background-color:yellow;width:250px;height:250px;padding:80px;"><div id="childDiv" onmouseenter="childOver()" onmouseleave="childOut()" style="background-color:limegreen;width:120px;height:120px;"></div></div>
</body>
</html>

onmouseover 、onmouseout和onmouseenter、onmouseleave的区别-简记相关推荐

HTML用ONMOUSEOVER,ONMOUSEOUT改变背景色或背景图片的方法
1.用onmouseout onmouseover 图像间相互变换: <image src="img1" οnmοuseοver="this.src='img2' ...
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout) onfocus/onblur:聚焦离焦事 ...
html可变换的背景图片,HTML用ONMOUSEOVER,ONMOUSEOUT改变背景色或背景图片的方法_html/css_WEB-ITnose...
1.用onmouseout onmouseover 图像间相互变换: 2.onmouseover onmouseout 改变文字背景色: οnmοuseοut="style.backgrou ...
鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点
1.onmouseover 指的是鼠标在进入某个元素的时候触发的事件 2.onmouseout 指的是鼠标在离开某个元素时触发的事件其他 onclick----------------------- ...
java onmouseover_转 CSS样式里使用JavaScript(onmouseover/onmouseout)
CSS样式里使用JavaScript(onmouseover/onmouseout)2 table { background-color:#000000; cursor:hand; } td { /* ...
JS事件：onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
1.onmouseover.onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件:(父亲有的东西,儿子也有) 2.onmouseenter.onmouseleave:鼠标经过时自身 ...
onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
属性描述 onmouseenter 当鼠标指针移动到元素上时触发. onmouseleave 当鼠标指针移出元素时触发 onmouseover 鼠标移到某元素之上. onmouseout 鼠标从某元 ...
onMouseEnter,onMouseLeave,onMouseOver,onMouseOut的区别
1.onMouseEnter和onMouseLeave: onMouseEnter:当鼠标移入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发. onMouseLeave:当鼠标移出指定 ...
onmouseover 、onmouseout和onmouseenter、onmouseleave的区别
onmouseover.onmouseout: onmouseover:鼠标进入元素时触发 onmouseout:鼠标离开元素时触发特点:鼠标经过子元素时,其父元素的onmouseover.onmo ...

onmouseover 、onmouseout和onmouseenter、onmouseleave的区别-简记

onmouseover、onmouseout：

onmouseenter、onmouseleave:

onmouseover 、onmouseout和onmouseenter、onmouseleave的区别-简记相关推荐

最新文章

热门文章