DOM事件里面的鼠标事件

最新推荐文章于 2023-07-25 09:58:47 发布
最新推荐文章于 2023-07-25 09:58:47 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44568194/article/details/90632510
版权

在JS里面有很多很多的事件，我们以后将会接触到它们，而它们在我们的JS代码里面是必不可少的，而现在我要讲的就是DOM事件里面的鼠标事件。

什么是鼠标事件呢？顾名思义就是和鼠标相关的一些事件，就像我们平时点击某些按钮，点击某些图片，它们会触发一些动作，例如弹出模态框，图片跳转页面等都是由鼠标事件来触发，现在我们就开始看看这些事件吧

在这里插入图片描述

Onclick　点击事件，这个就是平时你们点击某些东西就会触发的事件，例如按钮

Oncontextmenu　这个是你按右键打开菜单时，你有这个右击这个操作就会触发到它

Ondblclick　双击事件，同理点击事件，想想平时电脑双击打开某个软件

Onmousedown　你鼠标按下就会触发，一直按着会不触发，想想有时候你不小心点击到某些按钮，你只是按下去，一直按鼠标没有松开来，你把鼠标移开，那个事件就没有被触发。

Onmouseenter　当鼠标指针移动到元素上时触发。这个很好理解就是鼠标指针移到到那个地方触发的事件

onmouseleave
和上面同理，一个移入，一个移出

onmouseover
和上面的很相似，平时有些轮播图片，鼠标放上去轮播会停就是这个事件

onmouseout
同上

onmouseup
当你鼠标按下去然后松开触发的事件

黑炭桑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM对象(三) ——DOM总结和 事件高级、事件对象、DOM事件流、常用鼠标事件及常用键盘事件
m0_53619602的博客
07-14 570
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。主要修改dom的元素属性，dom元素的内容、属性、表单的值等主要获取查询dom的元素主要针对自定义属性接下来我们来整理事件操作。特点方法监听注册方式特点 该方法的三个参数方法监听注册方式事件流 描述的是从页面中接受事件的顺序 事件发生时会在元素节点之间按照特定
DOM 事件（鼠标事件）
lord_of_war的博客
09-06 1240
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行。 鼠标事件 onclick 事件 onclick 事件会在元素被点击时发生。 <p>单击按钮触发函数。</p> <button onclick="myFunction()">点我</button> <p id="demo"></p> function myFunction(){ documen
2、DOM事件
hzg_hou的博客
05-12 97
onmouseleave | 鼠标离开 | DOM对象.onmouseleave = function() {} || onmousewheel | 鼠标滚轮 | DOM对象.onmousewheel = function() {} || onmousemove | 鼠标移动 | DOM对象.onmousemove = function() {} || onmouseout | 鼠标移除 | DOM对象.onmouseout = function(){} |//a) 先判断当前函数有几个参数?
js获取dom的常用方式 + 常用触发事件
955姜太根的博客
01-13 1020
js获取dom的常用方式
DOM - 鼠标事件
qq_53109172的博客
07-25 319
这次的触发就可以很清晰的看见了，虽然进入 btn 区域时，也触发了离开的时候，但是没有像禁止冒泡前面的时候不仅触发离开还触发进入的事件，只是因为从 box 移入到了 btn ，且 btn 属于上层元素，所以是真的离开了 box 的区域，是一种正常的事件触发。所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent，MouseEvent 是一个构造函数。这两个属性是相对于鼠标上一次移动位置，一个移动事件的触发时持续的，所以这两个属性的值，是。这两个属性等效于 clientX 和 clientY。
DOM之鼠标事件
qq_34376264的博客
08-31 1283
一.鼠标事件  今天的js课上主要讲了js的函数、鼠标事件及应用。  现将常用的鼠标事件总结如下： onclick:鼠标点击事件 onmouseover:鼠标移入事件 onmouseout:鼠标移出事件 onmousedown:鼠标按下事件 onmouseup:鼠标释放事件 onmousemove:鼠标拖拽移动事件123456123456 具体内容，全部都以例子的方式呈现： 1.
详解Canvas事件绑定
12-13
而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。 我先来讲下实现原理：其实就是canvas绑定相关事件，在通过...
jq 鼠标提示效果
11-15
2. **鼠标事件**：在JavaScript和jQuery中，鼠标事件是用户通过鼠标进行交互时触发的事件，如`mouseover`（当鼠标指针进入元素区域）、`mouseout`（当鼠标离开元素区域）和`mousemove`（当鼠标在元素上移动）。...
jQuery鼠标拖动图片摇晃特效
04-09
总之，“jQuery鼠标拖动图片摇晃特效”是结合了jQuery事件处理和动画功能的一个有趣的应用，它通过监听鼠标事件和动态改变CSS属性来实现交互式的视觉效果。开发者可以通过掌握这些技术，进一步提升网页的互动性和...
jQuery实现鼠标经过图片变亮其他变暗效果
10-24
`$(function() {...})` 是jQuery中的文档就绪（document ready）函数，确保在DOM加载完成后再执行里面的代码。 1. `mouseover` 事件：当鼠标进入`.hovertreebox li`（即图片列表项）时，触发的事件。`$(this)` 表示...
鼠标跟随效果代码
09-06
这样的效果通常需要在DOM加载完成后执行，可以使用`window.onload`或者现代浏览器的`DOMContentLoaded`事件来确保代码在正确的时间运行。 总的来说，这个代码示例展示了如何利用JavaScript和CSS实现一个简单的鼠标...
DOM系列之DOM事件
老__L的博客
07-18 1506
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
HTML中的DOM事件——鼠标事件、键盘事件、框架对象事件、表单事件
weixin_44867717的博客
07-06 4956
dom元素
DOM——文档对象模型
qq_44700755的博客
11-10 1024
DOM 的概念 • 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。 DOM 树 • DOM 又称为文档树模型 • -
JS DOM 事件流
qq_35112578的博客
08-07 511
目录事件流：事件完整执行过程中的流动路径1、捕获阶段：从父元素到子元素2、冒泡阶段：从子元素到父元素阻止事件流发生1、阻止事件对象2、案例：阻止冒泡事件3、鼠标经过事件4、阻止默认行为两种注册事件的区别1、传统on注册L02、事件监听注册事件委托优点：提高性能原理：利用事件冒泡，给父级添加事件，子集可以触发实现：e.target 可以获得真正触发的子元素当事件被触发后，该事件会从子元素向其祖先元素依次触发 阻止事件流发生 1、阻止事件对象 2、案例：阻止冒泡事件 3、鼠标经过事件
DOM鼠标事件
weixin_66171880的博客
01-28 1858
1. 鼠标事件：用户操作鼠标在元素节点对象上做出的某些行为 当浏览器监听到事件行为时，会自动调用对应的事件处理函数 写法： 元素节点对象.事件名称 = 函数 2.给元素节点对象添加一个点击事件方法： 对象.onclick = function(){ 事件的处理函数/事件的处理程序 / 事件函数}； (快速)双击事件：ondblclick 3.鼠标移入事件： onmouseover、 onmouseenter 鼠标移出事件：onmouseleave、...
DOM事件 - 鼠标事件
m0_71710871的博客
06-12 542
JavaScript DOM 事件 - 鼠标事件中的部分事件说明
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
Yxd0724的博客
08-30 7829
onclick、oncontextmenu、ondblclick、onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseover、onmouseout、onmouseup
DOM事件高级④(常用的鼠标、键盘事件)
十八岁讨厌编程的博客
03-28 617
文章目录常见的鼠标事件鼠标事件鼠标事件对象常用的键盘事件键盘事件键盘事件对象附：ASCII码表 常见的鼠标事件 鼠标事件 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }) 2.禁止鼠标选中（selectstart 开始选中） document.addEventListener('
vue原生的dom事件
最新发布
05-01
Vue原生的DOM事件是指在Vue组件中接使用的DOM事件，与Vue的自定义事件不同。Vue提供了一种简的方式来处理DOM事件，通过在模板中使用v-on指令来监听DOM事件，并在组件中定义对应的方法来处理事件。 以下是Vue原生的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值