亲宝软件园·资讯

展开

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

皮卡丘和羊宝贝😄 人气:0
想了解JavaScript事件概念详解(区分静态注册和动态注册)的相关内容吗,皮卡丘和羊宝贝😄在本文为您仔细讲解JavaScript 事件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript,事件,JavaScript,静态注册,JavaScript,动态注册,下面大家一起来学习吧。

js中的事件

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

事件类型

常用的事件

事件的注册

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

动态注册基本步骤:

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>

加载全部内容

相关教程
猜你喜欢
用户评论