js中的事件
什么是事件?事件是电脑输入设备与页面进行交互的响应,我们称之为事件
事件类型
- 鼠标单击:例如单击button、选中checkbox和radio等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table的范围;
- 键盘按键:当按下按键或释放按键时;
- HTML事件:例如页面body被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容;
- 突变事件:主要指文档底层元素发生改变时触发的事件,如DomSubtreeModified(DOM子树修改)。
常用的事件
- onload 加载完成事件: 页面加载完成之后,常用于做页面js 代码初始化操作
- onclick 单击事件: 常用于按钮的点击响应操作。
- onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
- onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
事件的注册
什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种
- 静态注册事件:通过html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册
- 动态注册事件:是指先通过js 代码得到标签的dom 对象,然后再通过dom 对象.事件名= function(){} 这种形式赋于事件响应后的代码,叫动态注册
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名= fucntion(){}
静态动态注册举例
onload 加载完成事件
静态绑定:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态注册</title> <script type="text/javascript"> // onload 事件的方法 function onloadFun() { alert('静态注册onload 事件,所有代码'); } </script> </head> <!--静态注册onload 事件,onload 事件是浏览器解析完页面之后就会自动触发的事件,body标签的属性,通过这个属性注册--> <body οnlοad="onloadFun();"> </body> </html>
动态绑定:
固定的写法,通过window.onload(){}方法,在大括号内调用方法的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态注册</title> <script type="text/javascript"> // onload 事件动态注册。是固定写法 window.onload = function () { alert("动态注册的onload 事件"); } </script> </head> <body> </body> </html>
onclick单击事件
举例,从这个例子更好的体会两者定义的不同
onclick静态绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onclickFun() { alert("静态注册onclick 事件"); } </script> </head> <body> <!--静态注册onClick 事件,通过button的onclick属性--> <button onclick="onclickFun();">按钮1</button> </body> </html>
onclick动态绑定事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function () { //getElementById 通过id 属性获取标签对象 var btnObj = document.getElementById("btn01"); // 2 通过标签对象.事件名= function(){} btnObj.onclick = function () { alert("动态注册的onclick 事件"); } } </script> </head> <body> <button id="btn01">按钮2</button> </body> </html>
以上就是JavaScript事件概念详解(区分静态注册和动态注册)的详细内容,更多关于JavaScript 事件的资料请关注其它相关文章!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JavaScript事件概念详解(区分静态注册和动态注册)”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
20240518
20240518
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 【爵士乐】VA-2024-ParamountJazzLoungeChillingExperience(FLAC)
- 群星《离歌 网剧原声带》[320K/MP3][249.78MB]
- 群星《离歌 网剧原声带》[FLAC/分轨][538.53MB]
- 群星《承欢记 电视剧影视原声带》[320K/MP3][109.99MB]
- 【欧美乡村】JohnnyLee-2024-13thOfJulyandEmotions(FLAC)
- 【流行爵士】PattiAustin-2024-LoveSongs(FLAC)
- 【爵士乐】VA-2024-SupremeLoungeChillSelectionJazzyVibeTunes(FLAC)
- 群星《承欢记 电视剧影视原声带》[FLAC/分轨][219.8MB]
- 群星《乘风2024 第1期》[320K/MP3][110.09MB]
- 群星《乘风2024 第1期》[FLAC/分轨][322.4MB]
- 【古典音乐】卡拉扬《莫扎特·魔笛(全剧)》2CD.2015[FLAC+CUE整轨]
- Yurika《ただいま》【Hi-Res】24bit-96kHz【flac】