【JavaScript】DOM事件

最新推荐文章于 2024-05-21 14:15:14 发布

Mae_strive

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量75

点赞数 2

分类专栏：前端(h5+css+js+jq) 文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_51799151/article/details/120056335

版权

前端(h5+css+js+jq) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件：电脑输入设备与页面进行交互的响应

一、常见事件：

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

二、事件注册（绑定）:

告诉浏览器，当事件响应后要执行哪些操作代码。

静态事件注册： 通过html标签的事件属性直接赋于事件响应后的代码

动态事件注册： 先通过js代码得到对象的dom对象，然后通过
dom对象名.事件名=function(){}
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名=function(){}

例：

<script>
   //静态注册onclick事件
   function onclickFun(){
      alert("静态注册onclick事件");
    }
   //动态注册onclick事件
    window.onload=function () {
      //1、获取标签对象
      /*
       * document: javascript语言提供的一个对象(文档) 指的整个页面所有的内容
       * getElementById: 通过id属性获取标签对象
       */
      var btnObj=document.getElementById("btn01");
      //2、通过标签对象.事件名=function(){}
      btnObj.onclick=function () {
        alert("动态注册的onclick事件");
      }
    }
</script>

<body>
<!-- 静态注册onclick事件-->
<button onclick="onclickFun()">按钮1</button>
<!-- 动态注册onclick事件-->
<button id="btn01">按钮2</button>

</body>

单击按钮1：
在这里插入图片描述
单击按钮2：

Mae_strive

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】DOM事件

事件：电脑输入设备与页面进行交互的响应一、常见事件：1、onload ：完成加载事件，页面加载完成之后，常用于做页面js代码初始化操作2、onclick：单击事件，常用于按钮的点击相应操作3、onblur：失去焦点事件，常用于输入框失去焦点，后验证其输入内容是否合法4、onchange：内容发生改变事件，常用于下拉列表和输入框内容发生改变后操作5、onsubmit：常用于表单提交前，验证表单项是否合法二、事件注册（绑定）:告诉浏览器，当事件响应后要执行哪些操作代码。静态事件注册：
复制链接

扫一扫