原生js--事件类型

最新推荐文章于 2024-05-06 15:50:47 发布
最新推荐文章于 2024-05-06 15:50:47 发布
阅读量401 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013853928/article/details/52854303
版权

1、表单事件：

submit事件

reset事件

click事件

change事件

focus事件（不冒泡） （IE和ES5支持冒泡的focusin）

blur事件（不冒泡） （IE和ES5支持冒泡的focusout）

input事件（ES5 textinput提供更方便的获取输入文字的方案）

 

2、Window事件

load事件

DOMContentLoaded事件

readyStatechage事件

unload事件

beforeunload事件

resize事件

scroll事件

 

3、鼠标事件

click事件

dbclick事件

mouseover事件（冒泡）

mouseout事件（冒泡）

mousedown事件

mouseup事件

contextmenu事件

mouseenter事件（不冒泡）

mouseleave事件（不冒泡）

mousewheel事件（FF DOMMouseScroll事件、DOM3 wheel事件）

 

4、键盘事件

keydown事件

keyup事件

keypress事件

吃不胖的磊磊磊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS（DOM-事件机制）
qq_48108860的博客
03-12 847
事件三要素 1、事件源：触发事件的对象 ，如按钮对象 2、事件类型：如何触发？触发什么事件？如鼠标点击，键盘按下等 3、事件处理程序：函数 执行事件的步骤 1、获取事件源 2、注册事件（绑定事件） 3、采用函数赋值形式添加事件处理程序 绑定事件 1、向HTML元素中添加事件 1）onclick='alert(1)' 2）onclick='test()' function test(){ //不能写在window.onload=function(){}中，否则会找不到t...
JavaScript中常见的五种事件
weixin_50993868的博客
12-01 1389
鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。处理鼠标点击事件，将盒子的背景颜色改为绿色；
JS的事件类型（详解）
weixin_46726346的博客
06-02 2364
摘要 Web浏览器可能发生的事件有很多种类型，而这一篇我们针对于不同的浏览器的事件类型来说明一下，我们从DOM3级事件中总结了一下几种类型的事件： 事件 类型 作用意义 UI事件 当用户在页面上的元素进行交互时触发 焦点事件 当元素获得或失去焦点时触发 鼠标事件 当用户通过鼠标在页面上执行操作时触发 滚轮事件 当使用鼠标滚轮时触发 文本事件 当在文档中输入文本时触发 键盘事件 当用户通过键盘在页面上执行操作时触发 当然除了这些类型我们还有一些其他类型的事件，不过在这里
JS 常见原生事件（PC）
qq_43522419的博客
02-28 521
JS常见事件
JS-:原生JavaScript动画组件库
05-27
综上所述，"JS-原生JavaScript动画组件库"涉及的技术点广泛，涵盖了JavaScript基础、DOM操作、动画原理、性能优化等多个方面。通过深入理解和实践这些知识点，开发者可以创建出高效且具有交互性的动画效果。
JavaScript案例-原生ajax
02-16
"JavaScript案例-原生ajax"这个主题聚焦于如何不依赖任何库或框架，仅用JavaScript原生API实现Ajax通信。 Ajax的核心在于XMLHttpRequest对象，它允许我们在不刷新整个页面的情况下发送HTTP请求并接收响应。以下是...
原生js ---- 二维码生成器demo
09-19
总结一下，这个“原生js ---- 二维码生成器demo”教给我们如何使用QRCode.js库和原生JavaScript来创建自定义的二维码。通过理解和实践这个示例，开发者能够更好地掌握二维码生成技术，并将其应用到各种Web项目中。...
原生JS经典小项目-DOM练习
05-18
在本项目"原生JS经典小项目-DOM练习"中，我们将深入探讨JavaScript与DOM（文档对象模型）的交互，这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript来查找、修改和操作页面元素。在...
JavaScript案例-原生ajax查询所有用户
02-16
尽管现在有像jQuery、Vue.js等库提供了更方便的Ajax封装方法，但了解原生的Ajax实现有助于深入理解其工作原理。 AJAX允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，极大地提高了用户体验。...
2024年前端最全JavaScript——原生基础及事件，web开发工程师
最新发布
2401_84616922的博客
05-06 1006
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
js原生事件
yushuangyushuang的博客
02-10 7925
参考文章一 一、事件是什么 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，是可以被 JavaScript 侦测到的行为 二、DOM事件流的三个阶段 事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。 处于目标阶段 ：事件在<d...
原生js常用的事件触发方法
Z_hai_yan的博客
04-09 2129
鼠标事件 onclick：单击鼠标时触发 ondblclick：当用户双击主鼠标按钮时触发； onmousedown：当用户按下鼠标还未弹起时触发； onmouseup：当用户释放鼠标按钮时触发； mouseover：当鼠标移到某个元素上方时触发； mouseout：当鼠标移出某个元素上方时触发； mousemove：当鼠标指针在元素上移动时触发； mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡； mouseleave：鼠标移出； html事件 键盘事件 ...
js绑定onblur事件
是夜色太荒芜的专栏
08-03 1万+
对于页面上文本框验证时，我们需要给文本框添加事件。 原生JS方法： 添加：document.getElementById(“field”).setAttribute(“onblur”, “check()”); 删除：document.getElementById(“field”).removeAttribute(“onblur”); JQuery方法： 低版本的
JS事件类型
weixin_40512519的博客
07-26 438
JS的执行顺序是从上到下的。 <body> <div id="box">这是一个div</div> </body> <script> var box=document.getElementById("box"); var clicked=function(){ alert(&quo
Js中所有事件列表,on+事件名,React 适用
林中明月间丶
12-08 918
https://reactjs.org/docs/events.html#clipboard-events Clipboard Events: onCopy onCut onPaste Keyboard Events: onKeyDown onKeyPress onKeyUp onFocus onBlur Form Events: onChange onInput onInvalid onReset onSubmit Mouse Events: onClick onContextMen.
失去焦点和获得焦点发生事件(js)
热门推荐
Loger
04-29 5万+
失去焦点:onblur="hanshu(this)"获得焦点:onfocus="hanshu(this)"{      alert(请确认您输入格式是否正确！);    }//函数名：chksafe//功能介绍：检查是否含有,//,///参数说明：要检查的字符串//返回值：0：是 1：不是function chksafe(a){ return 1;/* fibdn = new Ar
原生JavaScript事件详解
weixin_33834679的博客
12-28 310
     JQuery这种Write Less Do More的框架，用多了难免会对原生js眼高手低。      小菜其实不想写这篇博客，貌似很初级的样子，但是看到网络上连原生js事件绑定和解除都说不明白，还是决定科普一下了。      首先声明，小菜懂的也不是很多，只是把我的思路和大家分享一下。   DOM0事件模型        事件模型在不断发展，早期的事件模型称为DOM0级别。...
原生js实现移动端touch事件，解决穿透问题
lulula的博客
07-30 9289
四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发 每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表 touches: //当前屏幕...
微信小程序原生 picker-view的使用
09-06
6. 在 js 文件中，实现事件处理函数，并通过setData()方法更新 selected 值以改变选中项。 7. 可以通过onPickerChange()等事件来监听 picker-view 的选中项改变的事件，并实现相应的逻辑。 需要注意的是，picker-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值