事件绑定(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-blog.csdnimg.cn/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>

运行结果：
原来

变大

事件绑定(onmouseout,onmouseover)相关推荐

事件绑定(onsubmit)表单提交
事件绑定(onsubmit)表单提交学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->Jav ...
事件绑定(onclick,onfocus,onblur)
事件绑定(onclick,onfocus,onblur) 学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类 ...
深度理解onmouseover事件和onmouseout事件
今天简单的讲解下onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的 ...
JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup详解 1.事件属性如下: 2.下面用一段代码来了解和体验这些鼠标事件的用法: & ...
jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
JavaScript事件绑定的方法说明收藏
JavaScript事件绑定的方法说明收藏事件使得客户端的 JavaScript 有机会被激活,并得以运行.在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作.虽然从第一 ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象
文章目录事件认识事件事件绑定 - DOM 0级事件 - DOM 2级事件(事件侦听器事件监听) 事件解绑解绑dom0级事件解绑dom2级事件常见的事件类型 1. 鼠标事件 click ...
Javascript事件绑定的几种方式
Javascript事件绑定的几种方式来源:http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html 上篇文章讲到了事件绑定的3中 ...

事件绑定(onmouseout,onmouseover)

事件绑定(onmouseout,onmouseover)

小案例讲解

事件绑定(onmouseout,onmouseover)相关推荐

最新文章

热门文章