JavaScript事件的概念是什么？有哪些常用事件？
发布时间：2022-03-24 14:22:24 所属栏目：语言 来源：互联网
导读：在学习JavaScript时，JavaScript事件的知识是需要掌握的。因此这篇文章就给大家简单的介绍一下JavaScript事件的概念，常用事件，事件的注册等等，有这方面学习需求的朋友可以了解一下。 js中的事件 什么是事件？事件是电脑输入设备与页面进行交互的响应，我
|
在学习JavaScript时，JavaScript事件的知识是需要掌握的。因此这篇文章就给大家简单的介绍一下JavaScript事件的概念，常用事件，事件的注册等等，有这方面学习需求的朋友可以了解一下。 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> （编辑：信阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
