事件绑定(onmouseout,onmouseover)
学习路线：JavaScript基础语法（输出语句）->JavaScript基础语法（变量）->JavaScript基础语法（数据类型）->JavaScript基础语法（运算符）->JavaScript基础语法（流程控制语句）->JavaScript基础语法（类型转换）->JavaScript基础语法（函数）->Array_JavaScript->String_JavaScript->自定义对象_JavaScript->JavaScript_BOM->Window对象->confirm()、setInterval()、setTimeout()->History、Location->闪烁的灯泡->JavaScript_DOM->事件绑定(onclick,onfocus,onblur)->
事件绑定(onmouseout,onmouseover)
->事件绑定(onsubmit)表单提交
->提交表单与验证表单案例
小案例讲解
- onmouseout 鼠标移出事件。
- onmouseover 鼠标移入事件。
需要完成 如下图效果，当鼠标移入到 蘑菇 图片上时，蘑菇图片变大；当鼠标移出 蘑菇图片时，蘑菇图片变小。
mushroom.png
演示代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #apple{ width: 200px; height: 200px; } </style> <body> <img id="apple" src="https://ucc.alicdn.com/images/user-upload-01/627e3af109db499f924932c49299e046.png" alt=""> <script> var x = document.getElementById("apple") x.addEventListener("mouseover", Mouseover, true) x.addEventListener("mouseout", Mouseout, true) function Mouseover(){ x.style.width = "500px" x.style.height = "500px" } function Mouseout(){ x.style.width = "200px" x.style.height = "200px" } </script> </body> </html>
运行结果：
原来
变大
