mouseleave 和 mouseout , mouseenter 和 mouseover,mouseover 和mousemove
mouseenter 和 mouseleave 是一对事件,分别指鼠标移入和离开当前元素, 这两个事件不冒泡;
mouseover 和 mouseout 是一对事件,指鼠标移入和离开元素,但是这个两个事件是冒泡,也就是说,鼠标移入或离开当前元素的子元素时,事件会冒泡到当前元素,当前元素的事件会被触发。
mousemove 是 鼠标在元素上移动时触发,具有冒泡性质。鼠标在元素内部移动时也会触发该事件。
当鼠标从外移入元素内, 再移出元素,事件触发的时序为:mouseover,mouseenter,mousemove,mouseout , mouseleave
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function mousemove(x){ console.log("mouse move"); } function mouseout(x){ console.log("mouse out"); } function mouseenter(){ console.log("mouse enter"); } function mouseover(){ console.log("mouse over"); } function mouseLeave(){ console.log("mouse leave"); } </script> </head> <body> <img onmousemove="mousemove(this)" onmouseover="mouseover(this)" onmouseleave="mouseLeave(this)" onmouseenter="mouseenter(this)" onmouseout="mouseout(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32"> </body> </html>
输入结果为:
mouse over
mouse enter
mouse move
mouse out
mouse leave