js事件类型总结

最新推荐文章于 2023-12-01 12:29:51 发布
最新推荐文章于 2023-12-01 12:29:51 发布
阅读量522 收藏 1
点赞数
分类专栏： 前端其他知识 文章标签： javascript 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuiziyoudexiao/article/details/75948587
版权

UI事件

  • load 当页面完全加载后触发
  • unload 当页面完全卸载后触发
  • abort 停止下载时，载入的内容没有加载完触发
  • error 发生错误时触发
  • select 当用户选择文本框中的一个或多个字符时触发
  • resize 当窗口大小发生变化时触发
  • scroll 当用户滚动带滚动条元素中的内容时，在该元素上面触发 ps：鼠标滚轮可以触发键盘上下键也可以触发

焦点事件

  • blur 在元素失去焦点时触发
  • focus 在元素获得焦点时触发
  • onchange 当input文本框内容发生变化时触发该事件
  • onsubmit 在提交表单时触发，可以在此限制表单的提交

鼠标与滚轮事件

  • click 单击鼠标时触发
  • dblclick 双击鼠标时触发
  • mousedown 按下鼠标时触发
  • mouseenter 鼠标从外界首次移动到元素上时触发
  • mouseover 鼠标经过该元素时触发
  • mousemove 鼠标在元素内部移动时触发
  • mouseleave 鼠标移出元素范围时触发 ps：移入子元素不会触发
  • mouseout 鼠标移出该元素时触发 ps：移入子元素也会触发
  • mouseup 松开鼠标按钮时触发
  • mousewheel 鼠标滚轮事件 ps:只要鼠标滚动了，无论页面有没有滚动都会触发 且键盘上下键不能触发

键盘及文本事件

  • keydown 按下键盘上任意键时触发
  • keypress 按下键盘上的字符键时触发
  • keyup 释放键盘上的键时触发
  • 修改键：事件对象中有四个属性shiftKey,ctrlKey,altkey,metakey，均是布尔值。分别表示shift键，ctrl键，alt键，meta键是否被按下。
  • 键码： 每个键都有键码唯一对应一个数字，可以通过event对象的keyCode属性访问键码，确定是哪个键触发了键盘事件

变动事件

当dom结构发生改变时触发

HTML5其他事件

  • contextmenu 单击鼠标右键触发，可以用于自定义上下文菜单，会取消浏览器默认的上下文菜单
  • hashchange事件 在url的参数列表发生变化时触发

mouseenter mouseleave mouseover之间的区别

<html>
<head>
    <title></title>
</head>
<body>
    <p> 当鼠标进入div1的时候会触发mouseover事件，因为btn1和btn2是包裹在div1下的子元素，所以当鼠标从div1进入到子元素btn1的时候又会触发mouseover事件 ,当鼠标从btn1进入到btn2的时候又会再次触发mouseover事件，当鼠标离开btn2元素本身 进入到div1的时候，又会触发mouseover</p>
    <div style=" border:10px solid red" id="div1">
        <input type="button" value="0" id="btn1" />
        <input type="button" value="btn2" id="btn2" style=" margin-left:40px" />
    </div>
 
 
    <p>  当鼠标进入到div2的时候就会触发mousemove事件，进入div2后【只要移动一个像素点】都会触发mousemove事件 [请谨慎使用，耗资源]</p>
    <div style=" border:10px solid red" id="div2">
        <input type="button" value="0" id="btn3" />
        <input type="button" value="btn4" id="btn4" style=" margin-left:40px" />
    </div>
 
 
    <p>只有当鼠标进入【被选中】控件div3的时候才会触发mouseenter事件，当鼠标进入【被选中】控件的【子元素】的时候而没有离开被选中控件本身的时候【不会再次】触发</p>
    <div style=" border:10px solid red" id="div3">
        <input type="button" value="0" id="btn5" />
        <input type="button" value="btn6" id="btn6" style=" margin-left:40px" />
    </div>
    
</body>
</html>
zuiziyoudexiao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js的事件机制总结
七月
12-06 775
js的事件机制包括三个阶段，捕获、目标和冒泡。 1. 事件冒泡 微软提出了名为事件冒泡的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件从最内层的元素开始发生，一直向上传播，直到document对象。 2. 事件捕获 网景提出另一种事件流名为事件捕获与事件冒泡相反，事件从最外层开始发生，直到最具体的元素。 上面的例子在事件捕获的概念下发生click事件的顺序应该是 document -> html -> body -> div -> p
JavaScript事件学习小结(五）js中事件类型之鼠标事件
10-22
JavaScript事件是Web开发中不可或缺的一部分，...总结来说，理解JavaScript中的鼠标事件对于创建交互式和响应式的网页至关重要。通过熟练掌握这些事件及其差异，开发者可以编写出更符合用户预期的代码，提高用户体验。
JS的事件介绍
热门推荐
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
JS事件汇总
von_ming的博客
06-29 4648
1. js事件 1.1 onclick 点击事件 1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
JS常用的事件类型
dachuichaobang的博客
04-09 1564
1. 常用的鼠标事件 click：单击鼠标左键触发 dblclick：双击鼠标左键触发 mousedown：鼠标按钮在元素上按下时触发 mouseout：鼠标指针移出一个元素边界时触发 mousemove：鼠标在某个元素上移动时持续触发 mouseup：松开鼠标按键时触发 mouseover：鼠标指针移到一个元素上时触发 mouseleave：鼠标离开元素时触发（只能离开目标元素时才触发） mouseenter：鼠标进入元素时触发（只能进入目标元素时才触发） 2. 常用的键盘事件 keydown：按下
JavaScript中的事件类型
Blueskyzhw的博客
11-20 1108
1. 鼠标事件（Mouse Events）：包括点击、双击、鼠标移入移出、鼠标按下释放等。2. 键盘事件（Keyboard Events）：包括按键按下、按键释放、按键组合等。6. 窗口事件（Window Events）：包括窗口打开、窗口关闭、窗口刷新等。5. 触摸事件（Touch Events）：包括触摸开始、触摸移动、触摸结束等。4. 焦点事件（Focus Events）：包括元素获得焦点、元素失去焦点等。3. 表单事件（Form Events）：包括表单提交、表单重置等。
介绍js各种事件
weixin_64965154的博客
06-02 9230
当用户将该元素拖到可放置的元素上并释放鼠标按钮时，将移动该元素到可放置的元素中。在这个例子中，我们获取了ID为“myElement”的元素，并使用addEventListener()方法添加了一个鼠标移动事件监听器。在这个例子中，我们获取了ID为“myButton”的按钮元素，并使用addEventListener()方法添加了一个点击事件监听器。点击事件是指当用户单击页面上的某个元素时触发的事件。鼠标移动事件是指当用户将鼠标移动到页面上的某个元素上时触发的事件。六、窗口大小改变事件。
javascript 键盘事件总结 推荐
10-29
根据项目需求，可以选择合适的事件类型来监听用户输入。例如，如果需要捕捉所有按键，包括系统功能键，`onkeydown` 和 `onkeyup` 是更好的选择；如果只关心可打印字符，那么 `onkeypress` 就足够了。 总的来说，...
js数据类型检测总结
10-18
给大家分享了js数据类型检测的相关实例内容，有需要的朋友可以测试下。
JavaScript中数据类型转换总结
01-19
在js中，数据类型转换分为显式数据类型转换和隐式数据类型转换。 1， 显式数据类型转换 a:转数字： 1）Number转换： 代码： var a = “123”; a = Number(a); 注意： a) 如果转换的内容本身就是一个数值类型的字符...
JS的事件类型（详解）
weixin_46726346的博客
06-02 2362
摘要 Web浏览器可能发生的事件有很多种类型，而这一篇我们针对于不同的浏览器的事件类型来说明一下，我们从DOM3级事件中总结了一下几种类型的事件： 事件 类型 作用意义 UI事件 当用户在页面上的元素进行交互时触发 焦点事件 当元素获得或失去焦点时触发 鼠标事件 当用户通过鼠标在页面上执行操作时触发 滚轮事件 当使用鼠标滚轮时触发 文本事件 当在文档中输入文本时触发 键盘事件 当用户通过键盘在页面上执行操作时触发 当然除了这些类型我们还有一些其他类型的事件，不过在这里
JavaScript中常见的五种事件
最新发布
weixin_50993868的博客
12-01 1378
鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。处理鼠标点击事件，将盒子的背景颜色改为绿色；
Javascript的常见的事件类型
记录点点滴滴的成长。
09-08 1482
Javascript的事件详解
JavaScript事件总结
YuanSword的博客
08-09 136
简介： 1.事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间 2.JavaScript 与 HTML 之间的交互是通过事件实现的。 3.对于 Web 应用来说，有下面这些代表性的事件：鼠标单击、双击事件、鼠标移入移出事件等 1、鼠标事件 事件 描述 onclick 鼠标单击事件 ondbclick 鼠标双击事件 onmouseover 鼠标移到某元素之上的事件 onmouseout 鼠标移出事件 onmousemove
js常见的事件类型
u011200562的博客
10-03 734
tips:纠正双击事件是ondblclick 1.鼠标事件 <body> <div id="obt">点击我</div> <div id="display"></div> <script> function handle(ev) { /*处理兼容性，获得事件对象, 或者var ev = ev || event; ...
Js常见的事件分类
迁就100
07-16 740
事件编程 （1）事件源：html标签 （2）编写事件监听器；定义一个函数 （3）注册/绑定事件监听器：使用html标签特定属性和定义的函数进行绑定 常见事件分类 onclick:单击点击事件 obdbclick:双击点击事件 onkeyup:按键抬起事件 onfocus:获取焦点事件 onblur:失去焦点事件 onchange事件:选项卡发生变化 场景:省市联动 onload:页面载入事件：一...
JavaScript：事件类型
山水子农
06-04 1076
我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分： 1、UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。 （1）、load事件 事件类型 var image=document.getElementById("myImage"); EventUti
原生js--事件类型
weixin_34153893的博客
02-17 132
1、表单事件： submit事件 reset事件 click事件 change事件 focus事件（不冒泡） （IE和ES5支持冒泡的focusin） blur事件（不冒泡） （IE和ES5支持冒泡的focusout） input事件（ES5 textinput提供更方便的获取输入文字的方案）   2、Window事件 load事件 DOMContentLoaded事件 r...
javascriptYUI基础知识.pdf
11-05
首先，我们要了解事件源对象，可以通过event.srcElement.tagName来获取事件源元素的标签名，通过event.srcElement.type获取元素的类型。我们还可以使用event.srcElement.setCapture()和event.srcElement....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值