JS DOM常用 监听事件

已于 2022-05-04 20:46:45 修改
阅读量210 收藏
点赞数
分类专栏： JS 文章标签： javascript
于 2022-04-24 10:40:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46275230/article/details/124374518
版权

JS DOM常用操作事件

文章目录

鼠标相关事件

onclick

用户点击目标对象时

ondblclick

用户双击某个对象时

onmousedown

鼠标按钮被按下时

onmousemove

鼠标被移动时

onmouseup

鼠标按键被松开时

onmouseout

鼠标从某元素(移出)时

onmouseover

鼠标移动到某元素之上(移入)时

键盘相关事件

onkeydown

按下某个键盘按键时

onkeypress

按下后松开某个键盘按键时,不响应输入法

onkeyup

松开某个键盘按键时

oninput

input有内容时触发,响应输入法

聚焦与失焦相关

onblur

元素失去焦点时

onfocus

元素获取焦点时

加载错误或中断相关

onerror

在加载文档或图像发生错误时

onabort

图像加载被中断时

页面加载完成与卸载相关

onload

一张页面或一副图像加载完成时

onunload

用户退出页面时

input按钮类型相关

onsubmit

提交按钮被点击时

onreset

重置按钮被点击时

窗口变化相关

onresize

窗口或框架被重新调整大小时

文本相关

onselect

文本被选中时

域内容改变相关

onchange

域的内容被改变.失去焦点时,并反馈结果

OGoodness
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript HTML DOM 事件监听器
Circle_Key的博客
04-29 816
addEventListener() 方法方法将事件处理程序附加到指定的元素。方法在不覆盖现有事件处理程序的情况下将事件处理程序附加到元素。可以向一个元素添加多个事件处理程序。可以将许多相同类型的事件处理程序添加到一个元素，即两个“点击”事件。可以将事件侦听器添加到任何 DOM 对象，而不仅仅是 HTML 元素。即窗口对象。方法可以更轻松地控制事件对冒泡的反应。使用方法时，JavaScript 与 HTML 标记分开，以提高可读性，并允许您添加事件侦听器，即使您不控制 HTML 标记也是如此。
JavaScript-Dom-监听事件
huiguo_的博客
10-20 827
文章目录DOM事件的学习 DOM事件的学习 那么当我们按下按键时，如何获取按键的键值呢？我们可以通过给onkeydown方法添加一个参数event将我们所按下的键传入函数，在按键对象进入函数后，我们就可以通过event.keycode来获取他的键值。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[JS] DOM 的事件监听、混杂模式和标准模式适配
qq_39559879的博客
09-19 288
本文主要内容：事件监听鼠标事件键盘事件页面加载事件。
鼠标移入移出事件，mouseover、mouseenter区别
Programmer555的博客
11-26 7867
javascript鼠标移入移出事件
JavaScript鼠标拖动事件监听使用方法及实例效果
weixin_47040861的博客
02-19 5767
JavaScript鼠标拖动事件监听,包括drag事件、dragstart事件、dragenter事件、dragleave事件、dragover事件、drop事件、dragend事件
js 冒泡事件与事件监听使用分析
12-11
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 查看运行效果 事件监听 事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 ...
JS 事件绑定、事件监听、事件委托详细介绍
11-26
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（事件代理）等。这些名词是什么意思呢，有什么作用呢？ 事件绑定 要想让 JavaScript 对用户的操作作出响应，首先...
c认证web进阶dom与bom
10-03
3、常用键盘事件属性 this使用输出本身 同上 弹窗 窗口事件 1、常用鼠标事件 过程 BOM 1、BOM结构 2、window对象 3、location对象 4、history对象 5、navigator对象 6、screen对象 导航栏顶部返回 ...
dop:Dynamic of package，里面封装了一些个人常用的方法，全兼容的dom操作事件，监听对象变化自动更新的方法
05-30
Dynamic of package，里面封装了一些个人常用的方法，全兼容的dom操作事件，监听对象变化自动更新的方法 Dop.prototype.touch() 兼容全端的交互事件，案例文件touch.html 兼容：兼容ie9+和移动端大部分版本，由于...
JS鼠标3次点击事件实现代码及扩展思路
12-12
这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。...
webapi-03
qq_62413209的博客
02-15 383
webapi-03 1.删除节点 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // // 1.获取元素 // var ul = document.querySelector('ul'); // ul.rem...
js 关于如何动态设置css的hover样式最佳方式，设置hover样式
PrimaryColor
11-16 5291
网上很多方式都是采用js监听dom的鼠标移入（onmouseover）移出（onmouseout）事件，进行控制这个dom的hover样式。消耗性能先不说，代码也很庞大，再加上如果是自定义主题（修改后能立马看到效果的，不是需要刷新）的功能可能就更麻烦了，要给所有的dom都绑定这样的事件。
js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
热门推荐
ghjzzhg的博客
01-16 7万+
onclick 单击事件 onblur 失去焦点事件 onchange 当对象或选中区的内容改变时触发。 onmouseover 当用户将鼠标指针移动到对象内时触发。 onmouseout 当用户将鼠标指针移出对象边界时触发。 onsubmit 当表单将要被提交时触发。 1、静态点击事件 script type="text/javascript"> // A标签的点击事
js鼠标移入移出_JS中Dom的一些事件
weixin_39927158的博客
12-03 2979
学了这么多天的JavaScript今天又学到了一些事件，所谓事件就是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水，当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。说白了，事件是文档或浏览器中发生的特定交互瞬间。有两种事件，一种是事件冒泡，一种是事件捕获首先说说事件捕获，事件捕获呢就是比如你发生了一件事，首先你先告诉你的父母，然后父母再告诉老师，老师再告诉校长，这样...
前端---js中onmouseover和onmouseout事件
Nagile-zhou博客
09-27 9225
在网页浏览中我们可以发现在有些页面的部分当我们鼠标移动到某个板块的时候会发现它弹出一个新的板块并且当鼠标移出后又自动隐藏,是因为在改板块中使用了javascript中的onmouseover和onmouseout这两个事件来实现的操作.   1.onmouseover定义和用法 onmouseover 事件会在鼠标指针移动到指定的对象上时发生。 语法 onmouseover="Some...
Javascript：DOM事件（监听鼠标点击/释放，鼠标悬停/离开等）
books1958的专栏
01-27 1万+
使用Javascript可以对HTML页面上的各种事件进行监听，如鼠标点击/释放，鼠标悬停/离开，等等。
js事件中的onmouseout和onmouseleave
面具哥布林的博客
10-10 1565
写一个项目的过程中发现一个问题： 鼠标监听A元素的onmouseout事件，结果当鼠标移到A元素里面的B元素时，事件也触发了。 原因是因为：事件冒泡。 当鼠标从A元素进入到B元素时，A也会触发自己的onmouseout事件，但是由于自己并没有绑定这个事件，因此B的onmouseout传递给了A元素，所以当进入B时，实际上就触发了A元素的onmouseout事件了。 解决办法是使用onmous
DOM常见事件的监听
m0_67302441的博客
05-25 1424
常见事件 一，鼠标事件 mouseenter：鼠标移动到元素上时出发（不支持冒泡），不能使用事件委托； 进入子元素依然属于在该元素内，没有任何反应。 mouseover：鼠标移到某元素之上（支持冒泡），先调用父元素的mouseout，再调用子元素的mouseover，因为支持冒泡，所以会将mouseover传递到父元素中； 二，常见的键盘事件 onkeydown：某个案件被被按下，事件先发生 onkeypress：发生在文本被输入 onkeyup：某个按键被松开，发生在文本输入完成 区分ev
JavaScript addEventListener()事件监听方法
weixin_30300225的博客
08-06 964
addEventListener()方法将事件处理程序附加到指定的元素。 addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。 您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。 您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。 addEvent...
js给动态生成的dom添加事件
最新发布
05-10
可以在生成DOM元素的同时，使用该方法添加事件监听器。 ```javascript let button = document.createElement('button'); button.textContent = 'Click me'; button.addEventListener('click', function() { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值