JS监听事件

于 2024-04-18 23:22:15 发布
阅读量204 收藏
点赞数 3
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74279698/article/details/137941631
版权

1.点击事件

    • click:鼠标点击左键触发
    • dblclick:鼠标双击左键出发
    • contextmenu:鼠标右键点击触发

2.焦点事件

    • focus:元素获得焦点触发
    • blur:元素失去焦点触发

3.鼠标事件

    • mouseenter:鼠标移入元素触发
    • mouseleave:鼠标移出元素触发
    • mousemove:鼠标在元素内部移动触发
    • mousedown:鼠标按钮被按下触发
    • mouseup:鼠标按钮被释放触发

4.键盘事件

    • keydown:某个键盘按键被按下触发
    • keyup:某个键盘按键被释放触发
    • input:输入框内容改变触发

5.其他事件

    • submit:表单提交触发
    • resize:浏览器窗口大小变化触发
    • scroll:浏览器滚动条位置变化触发

6.JSDOM鼠标事件

    • onclick:鼠标点击左键触发
    • onmouseover:鼠标经过触发
    • onmouseout:鼠标离开触发
    • onfocus:获得鼠标焦点触发
    • onblur:失去鼠标焦点触发
    • onmousemove:鼠标移动触发
    • onmouseup:鼠标弹起触发
    • onmousedown:鼠标按下触发
前端小菜鸡一只
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js监听鼠标点击和键盘点击事件并自动跳转页面
10-25
主要介绍了js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面，很简单的一个实现
JS监听事件的叠加和移除功能
12-09
html DOM元素有很多on开头的监听事件，如onload、onclick等，见DOM...　利用addEventListener添加监听事件，可以重复添加，并不会互相覆盖： window.addEventListener("resize",function(){ alert(1) }) w
js之 事件监听（鼠标、焦点、键盘、文本）
最新发布
qq_53165476的博客
06-15 2930
事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮。
js监听浏览器焦点事件
佳佳鸽的博客
01-24 1961
window.onfocus = function () { //焦点在当前窗口 //功能函数 } window.onblur = function () { //焦点不在当前窗口 //功能函数 } 当点击浏览器外的区域： window.onfocus = function () { window.alert("焦点离开网页"); } 当点击浏览器内的区域： window.onfocus = function () { window.alert("焦点回到网页"); }
JavaScript——监听事件：点击鼠标，视频静音（原神官网）
u013430418的博客
07-22 2683
用JS实现视频的静音，可以实现如图按钮所有功能,时间也和视频同步，JS实现。
JS中的事件监听
热门推荐
杜永康的博客
03-30 1万+
事件监听是Web开发中非常重要的一个概念，掌握了它的用法，可以让我们实现更加丰富和动态的交互效果。在实际开发中，我们需要根据具体的需求选择合适的事件类型和事件处理函数，以及注意事件传播和事件对象的相关问题。
监控鼠标与键盘事件 js
wang_9909的博客
08-01 595
//鼠标点击 document.addEventListener('click', function (e) { console.dir(e) }) //鼠标右键菜单 document.addEventListener('contextmenu', function (e) { e.preventDefault() //取消鼠标右键菜单 }) //禁止鼠标选中事件 document.addEventListener('selectstart', function (e) { e.preventDe
html5鼠标右键事件,js鼠标右键点击事件
weixin_30486717的博客
06-02 2247
在网页中，js代码与jq代码都可以监听鼠标右键的点击事件，当然也可以阻止鼠标右击的系统菜单。具体的的实现代码可参考下面的博文！JS监听鼠标右击事件的代码示例1：document.oncontextmenu=function(e){//整个页面的js事件alert('这是鼠标点击事件！');returnfalse;//阻止右键弹窗};注意：代码中必须加入 return false; 代...
两种js监听滚轮事件的实现方法
11-23
一、原生js通过[removed]监听 //[removed] = function() {//为了保证兼容性，这里取两个值，哪个有值取哪一个　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 　//scrollTop...
ext.js监听事件
12-06
ext封装的太死板，里面有常用到的15个ext.js触发事件和监听事件，对ext了解的不是特别深入，大部分都是经常碰到的
前端右键点击事件
02-28
前端右键点击事件,显示菜单功能。
解决Js先触发失去焦点事件再执行点击事件的问题
10-18
今天小编就为大家分享一篇解决Js先触发失去焦点事件再执行点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JS针对浏览器窗口关闭事件的监听方法集锦
10-22
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
js事件监听机制(事件捕获)总结
12-04
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，...
原生JS监听鼠标右键事件，禁用默认事件，绑定新的自定义标签的方法
陈先生的博客
12-19 3429
最近在开发的时候，需要对鼠标右键做一个监听，根据查阅文档发现我们可以使用oncontextmenu来对右击事件进行监听，如果要监听全局的话，直接使用window.oncontextmenu来进行绑定。首先我们要使用e.preventDefault();禁用的默认的右击事件，然后再添加我们的自定义的内容；
javaScript----事件监听
drhnb的博客
06-09 1563
什么是事件： 就是在编程时系统内发生的动作或发生的事情 例如：用户在网页上单击一个按钮 什么是事件监听： 检测是否有事件发生，一旦有事件发生，就立即调用函数做出响应 例如：鼠标经过显示下拉菜单，用户点击按钮更换轮播图等
JS 捕获浏览器焦点事件
段占彪的博客
01-06 4906
方法一 监听 window.onfocus() 和window.onblur()事件实现 当前窗口得到焦点 window.onfocus = function() { // 开始计时或者播放 }; 当窗口失去焦点 window.onblur = function() { //停止计时或者播放 }; 缺点 由于是判断焦点，如果是在当前页面上铺上一个小窗口，那当前页面就暂停了...
JS的事件监听
Raccon_的博客
12-13 3330
事件 鼠标事件 1.onclick 鼠标点击左键触发 2.onmouseover 鼠标经过触发 3.onmouseout 鼠标离开触发 4.onmousemove 鼠标移动触发 5.onmouseup 鼠标弹起触发 6.onmousedown 鼠标按下触发 7.onfocus 获得鼠标焦点触发 8.onblur 失去焦点触发 注册事件 1.传统方式on开头的事件 element.οnclick=function(){} 注：注册事件有唯一性 同一个元素同一个事件只能设置一个处理函数，最后
javascript监听事件示例
05-22
以下是一个基本的 JavaScript 监听事件的示例： HTML 代码： ```html <button id="myButton">点击我</button> ``` JavaScript 代码： ```javascript const button = document.getElementById('myButton'); // 获取按钮元素 button.addEventListener('click', function(event) { // 添加 click 事件监听器 alert('你点击了按钮！'); // 弹出提示框 }); ``` 在这个示例中，我们首先使用 `document.getElementById()` 方法获取了 ID 为 "myButton" 的按钮元素，并将其存储在 `button` 变量中。然后，我们使用 `addEventListener()` 方法添加了一个 click 事件监听器。当按钮被点击时，这个监听器会触发一个包含提示信息的弹出框。 当你在页面上点击按钮时，会看到一个提示框弹出，其中包含 "你点击了按钮！" 的文本。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值