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


Posted in Javascript onFebruary 05, 2021

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 相关文章推荐
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 Javascript
详解javascript脚本何时会被执行
Feb 05 #Javascript
前端如何实现动画过渡效果
Feb 05 #Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 #Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
如何在JavaScript中使用localStorage详情
Feb 04 #Javascript
vue浏览器返回监听的具体步骤
Feb 03 #Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 #Vue.js
You might like
PHP编程网上资源导航
2006/10/09 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
行政工作试用期自我评价
2014/09/14 职场文书
介绍信格式
2015/01/30 职场文书
刑事辩护词范文
2015/05/21 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
小学运动会开幕词
2016/03/04 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers