奋斗30天Javascript之DOM事件模型（Part27）

最新推荐文章于 2023-05-06 21:56:44 发布
最新推荐文章于 2023-05-06 21:56:44 发布
阅读量155 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41406727/article/details/89351995
版权
本文详细介绍了HTML DOM中的各种事件，包括oncontextmenu、ondblclick、onmousedown等，探讨了它们的语法和应用场景。此外，还讲解了鼠标和键盘事件的相关属性，如clientX、keyCode和key，帮助开发者更好地掌握DOM事件处理。
摘要由CSDN通过智能技术生成

HTML DOM 事件

鼠标事件

属性 描述 DOM
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发  
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。

oncontextmenu 事件

语法

HTML 中:

<element οncοntextmenu="myScript">尝试一下

JavaScript 中:

object.οncοntextmenu=function(){ myScript};尝试一下

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("contextmenu", myScript);尝试一下

注意： Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener() 。

ondblclick事件

语法

HTML 中:

<element ondblclick="SomeJavaScriptCode">

JavaScript 中:

object.ondblclick=function(){SomeJavaScriptCode};

參數： 

参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

onmousedown 事件

定义和用法

onmousedown 事件会在鼠标按键被按下时发生。

提示： 与 onmousedown 事件相关连得事件发生次序（ 鼠标左侧/中间 按钮）：

  1. onmousedown
  2. onmouseup
  3. onclick

与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):

  1. onmousedown
  2. onmouseup
  3. oncontextmenu

语法

在 HTML 中:

<element onmousedown="SomeJavaScriptCode">

在 JavaScript 中:

object.onmousedown=function(){SomeJavaScriptCode};

參數： 

参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。

onmousedown 属性适用于所有 HTMl 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.

栗子：

弹出用户点击的元素

最低0.47元/天 解锁文章
那是遇知吧
关注
专栏目录
【JS】DOM事件模型
LZGS_4的专栏
05-29 2923
DOM事件模型主要包含4个方面的内容，分别是： 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下： 首先，什么是DOM？文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。一般的，支持Javascript的所有浏览器都支持DOM。 在DOM眼中，HTML跟XML一样是一种树形结构的文档，是根（roo
js之DOM事件
m0_61547956的博客
04-22 3366
元素创建事件的两种方式 传统方式 on开头的事件，事件的唯一性，同一个元素同一个事件只能设置一个处理函数，后面的覆盖前面的，下列代码只弹出2。 var btns = document.querySelectorAll('button'); btns[0].onclick = function() { alert(1); } btns[0].onclick = function() { alert
JavaScript (六) -- JavaScript 事件（常用事件的运用）
最新发布
PUYALEI的博客
05-06 1432
常用事件（onload、onsubmit、onclick、ondblclick、onblur、onfocus、onchange）的运用。
HTML DOM 事件 —— 鼠标事件 JS鼠标事件
Yxd0724的博客
08-30 7904
onclick、oncontextmenu、ondblclick、onmousedown、onmouseenter、onmouseleave、onmousemove、onmouseover、onmouseout、onmouseup
鼠标事件：onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽
JEFF_xieyuzhi的博客
10-06 9927
鼠标事件： onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数。 onmousedown：事件会在鼠标按键被按下时发生。 onmouseup：事件会在松开鼠标按键时触发。 <!DOCTYPE html> <html lang="en"> <head> <meta cha...
html 左键右键双击事件,html中在鼠标双击元素时触发的事件属性ondblclick
weixin_33272141的博客
05-31 1122
实例Copy Text浏览器支持IEFirefoxChromeSafariOpera所有主流浏览器都支持 ondblclick 属性。定义和用法ondblclick 属性在鼠标双击元素时触发。注释：ondblclick 属性不适用以下元素：、、、、、、、、、 或 。HTML 4.01 与 HTML5 之间的差异无。语法属性值值描述script发生 ondblclick 时运行的脚本。最近项目中遇到...
onclick ondblclick事件共存的方法
11-18 538
var click_flag; function onclick(){ click_flag = false; window.setTimeout(function(){ if (!click_flag) { // onclick code } }, 200); } fu...
JavaScript的DOM之鼠标悬浮事件
热门推荐
m0_50481455的博客
04-21 1万+
JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理： 就是当鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬浮事件onmouseover()和onmouseout()事件</tit
JavaScript DOM编程艺术【第2版&高清】.pdf
10-26
但是，根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术，高清资源，无比经典，值得拥有”，我们可以推断这本书主要讲述了JavaScript中DOM（文档对象模型）的相关编程技术。...
JavaScript DOM编程艺术(中文第2版)part2
10-11
JavaScript DOM编程艺术(中文第2版)part2欢迎大家下载使用。
onClick 事件 和 onDblClick 事件并存的解决方法
qq_40202869的博客
03-27 1633
最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行 onclick， 而不会执行 ondblclick； 这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了，代码如下： <body> <div "test1()" "test2()" class="test"><...
onClick事件和onDblClick 事件并存的解决方法
Oshadow1277的博客
12-16 1202
遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行onclick， 而不会执行 ondblclick；这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了。 实质就是利用定时器延迟执行onclick事件，这样在双击过程中会取消中途触发的单击事件，代码如下： <script type="text/ja...
html-oncontextmenu 事件
cxu123321的博客
10-18 410
oncontextmenu事件 事件对象 实例 当用户在 <div> 元素 上右击鼠标时执行 JavaScript ： <div oncontextmenu="myFunction()" contextmenu="mymenu"> 定义和使用 oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。 注意：所有浏览器都支持 oncont...
html鼠标点击事件代码,HTML onmousedown事件用法及代码示例
weixin_42522626的博客
06-04 2903
按下元素上方的鼠标按钮时，将发生HTML DOM onmousedown事件。左键单击的相关事件：onmousedownonmouseuponclick右键单击的相关事件：onmousedownonmouseuponcontextmenu用法:在HTML中：在JavaScript中：object.onmousedown = function(){myScript};在JavaScript中，使用a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值