好资源导航 » 文章资讯 » JavaScript事件概念详解(区分静态注册和动态注册)

JavaScript事件概念详解(区分静态注册和动态注册)

2023-07-05 21:49:06 70

js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应，我们称之为事件

事件类型

鼠标单击：例如单击button、选中checkbox和radio等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table的范围；
键盘按键：当按下按键或释放按键时；
HTML事件：例如页面body被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；
突变事件：主要指文档底层元素发生改变时触发的事件，如DomSubtreeModified(DOM子树修改)。

常用的事件

onload加载完成事件：页面加载完成之后，常用于做页面js代码初始化操作
onclick单击事件：常用于按钮的点击响应操作。
onblur失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法。

事件的注册

什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种

静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册
动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋于事件响应后的代码，叫动态注册

动态注册基本步骤：

1、获取标签对象
2、标签对象.事件名=fucntion(){}

静态动态注册举例

onload加载完成事件

静态绑定：





静态注册

//onload事件的方法
functiononloadFun(){
alert('静态注册onload事件，所有代码');
}

动态绑定：

固定的写法，通过window.onload(){}方法，在大括号内调用方法的





动态注册

//onload事件动态注册。是固定写法
window.onload=function(){
alert("动态注册的onload事件");
}

onclick单击事件

举例，从这个例子更好的体会两者定义的不同

onclick静态绑定事件





Title

functiononclickFun(){
alert("静态注册onclick事件");
}




按钮1

onclick动态绑定事件





Title

window.onload=function(){
//getElementById通过id属性获取标签对象
varbtnObj=document.getElementById("btn01");
//2通过标签对象.事件名=function(){}
btnObj.onclick=function(){
alert("动态注册的onclick事件");
}
}




按钮2

以上就是JavaScript事件概念详解(区分静态注册和动态注册)的详细内容，更多关于JavaScript事件的资料请关注毛票票其它相关文章！

返回顶部
514930285
czq8825@qq.com