Javascript中鼠标事件

鼠标中的几个事件

简单的介绍一下鼠标事件的用法，如当一个注册界面要求录入信息后移开鼠标，后面显示判断录入的信息格式是否正确

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="" cellspacing="" cellpadding=""><tr><td>账户：</td><td><input type="text" name="uname" id="uname" value="" onblur="checkUname()" /></td><td><label id="msg1"></label></td></tr></table><div id="result"></div><script type="text/javascript">function checkUname() {//实现用户名验证，用户名只能是英文字母，且长度至少6位var reg = /^[a-zA-Z]{6,}$///获取文本框中的值var username = document.getElementById("uname").valueif(reg.test(username)) {document.getElementById("msg1").innerHTML = "用户名格式正确"return true} else {document.getElementById("msg1").innerHTML = "用户名格式不正确"return false}}</script></body></html>

实现效果如下

当鼠标放上去时

当鼠标移出时

当输入信息格式正确时

这是onblur事件实现的效果

还有一种就是大家在网上逛商城时经常遇见的一种方式：当鼠标移动到某一张图片时，主屏幕上就会显示这个图片

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div0{width: 880px;height: 400px;background-image: url(../img/1.jpg);background-repeat: no-repeat;}</style></head><body><div class="list"><img src="../img/1.jpg" alt="" width="200"/><img src="../img/2.jpg" alt="" width="200"/><img src="../img/3.jpg" alt="" width="200"/><img src="../img/4.jpg" alt="" width="200"/></div><div id="div0" style="background-image: url(../img/1.jpg);"></div><script type="text/javascript">var imgs=document.querySelectorAll(".list img")//给每一个img标签绑定一个onmouseover事件：鼠标移入到标签上触发的事件//onmouseout:鼠标从元素上移出for (var i=0;i<imgs.length;i++) {imgs[i].onmouseover=function(){document.getElementById("div0").style.backgroundImage="url("+this.src+")"}}</script></body>
</html>

效果展示

当鼠标移到哪一张图片，下方就展示哪一种图片

Javascript中鼠标事件相关推荐

面试题58：javascript中鼠标事件有哪些
鼠标事件有: 1.click(单击)事件: 2.dblclick(双击)事件: 3.mousedown事件: 4.mouseup事件: 5.mouseout事件: 6.mouseover事件: 7.m ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册<body onLoad="ready()"></body > ...
12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等由于DOM是一个树结构,如果在 ...
java鼠标js触发事件吗,JavaScript常见鼠标事件与用法分析
摘要:这篇JavaScript栏目下的"JavaScript常见鼠标事件与用法分析",介绍的技术点是"JavaScript.鼠标事件.鼠标.事件.用法.分析", ...
java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...

Javascript中鼠标事件

Javascript中鼠标事件相关推荐

最新文章

热门文章