网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2025/4/29 浏览:3 次 )

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 事件的资料请关注其它相关文章!

上一篇:详解JavaScript中的this指向问题
下一篇:详解javascript脚本何时会被执行
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap