面试题58：javascript中鼠标事件有哪些

鼠标事件有：

1、click（单击）事件；

2、dblclick（双击）事件；

3、mousedown事件；

4、mouseup事件；

5、mouseout事件；

6、mouseover事件；

7、mousemove事件；

8、mouseleave事件等。

鼠标事件类型

事件类型说明

click 单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件

dblclick 双击鼠标左键时发生，如果右键也按下则不会发生

mousedown 鼠标按钮被按下时发生

mouseout 鼠标指针位于某个元素上且将要移出元素的边界时发生

mouseover 鼠标指针移出某个元素到另一个元素上时发生

mouseup 鼠标按键被松开时发生

mousemove 鼠标在某个元素上时持续发生

mouseleave 当鼠标指针移出元素时触发

mouseenter 当鼠标指针移动到元素上时触发。

contextmenu 在用户点击鼠标右键打开上下文菜单时触发

鼠标事件类型
事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	鼠标按钮被按下时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	鼠标按键被松开时发生
mousemove	鼠标在某个元素上时持续发生
mouseleave	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发。
contextmenu	在用户点击鼠标右键打开上下文菜单时触发

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS常用鼠标事件</title><style>li{font-size: 18px;line-height: 35px;}li:hover{cursor:pointer;}</style></head><body><ol><li>单击我变色！</li><li>双击有惊喜！</li><li>鼠标滑过字体变大，鼠标离开字体变小！</li><li>鼠标按下文字为红色，鼠标抬起文字为绿色，鼠标移动打印“鼠标在 li 中移动了...”！</li></ol><script>// 获取 li 标签var oLis = document.getElementsByTagName("li");/* 单击第一个 li */oLis[0].onclick = function () {this.style.backgroundColor = 'red';}/* ******************************************* *//* 双击第二个 li */oLis[1].ondblclick = function () {this.style.color = 'red';}/* ******************************************* *//* 鼠标滑过第三个 li */oLis[2].onmouseover = function () {this.style.fontSize = 22 + 'px';}/* 鼠标离开第三个 li */oLis[2].onmouseout = function () {this.style.fontSize = 18 + 'px';}/* ******************************************* *//* 鼠标按下第四个 li */oLis[3].onmousedown = function () {this.style.color = 'red';}/* 鼠标抬起第四个 li */oLis[3].onmouseup = function () {this.style.color = 'blue';}/* 鼠标在第四个 li 上移动 */oLis[3].onmousemove = function () {console.log('鼠标在 li 中移动了...');}</script></body></html>

面试题58：javascript中鼠标事件有哪些相关推荐

Javascript中鼠标事件
鼠标中的几个事件简单的介绍一下鼠标事件的用法,如当一个注册界面要求录入信息后移开鼠标,后面显示判断录入的信息格式是否正确 <!DOCTYPE html> <html>< ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册<body onLoad="ready()"></body > ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
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 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...

面试题58：javascript中鼠标事件有哪些

鼠标事件有：

面试题58：javascript中鼠标事件有哪些相关推荐

最新文章

热门文章