事件绑定(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://img-/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>
运行结果:
原来
变大