Javascript 事件(静态注册和动态注册)

最新推荐文章于 2022-11-29 10:45:24 发布

码ming

最新推荐文章于 2022-11-29 10:45:24 发布

阅读量3.1k

点赞数 11

分类专栏： Javaweb 文章标签： javascript 按键事件点击事件静态注册动态注册

本文链接：https://blog.csdn.net/weixin_46168350/article/details/111768702

版权

本文介绍了JavaScript中的事件，包括事件类型如鼠标点击、键盘按键和HTML事件，以及事件句柄。重点讨论了事件注册的两种方式：静态注册（通过HTML属性直接指定）和动态注册（通过JavaScript获取DOM对象后绑定）。文中列举了如onload、onclick、onblur、onchange和onsubmit等常用事件，并详细解释了动态注册事件的步骤。

摘要由CSDN通过智能技术生成

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</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
    
alert('静态注册onload 事件，所有代码');
}
// onload 事件动态注册。是固定写法
window.onload = function () {
    
alert("动态注册的onload 事件");
}
</script>
</head>
<!--静态注册onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">
-->
<body>
</body>
</html>

onclick 单击事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function

最低0.47元/天解锁文章

码ming

关注

11
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
Javascript 事件(静态注册和动态注册)

js 中的事件什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。常用的事件：onload 加载完成事件：页面加载完成之后，常用于做页面js 代码初始化操作onclick 单击事件：常用于按钮的点击响应操作。onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。事件的注册又分为静态注册和动态注册两
复制链接

扫一扫

专栏目录