JS中的常用事件及事件注册的两种方式

heliuerya

已于 2023-02-10 14:42:34 修改

阅读量1.2k

点赞数

分类专栏： JavaScript 学习笔记文章标签： javascript 前端 servlet

于 2023-02-04 10:56:41 首次发布

本文链接：https://blog.csdn.net/heliuerya/article/details/128879641

版权

学习笔记同时被 2 个专栏收录

277 篇文章 5 订阅

订阅专栏

JavaScript

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>JS中的常用事件及事件注册的两种方式</title>
   </head>
   <body>
       <script type="text/javascript">
           /*
               JS中的事件:
                   blur:失去焦点
                   focus:获得焦点

                   click:鼠标单击
                   dblclick:鼠标双击

                   keydown:键盘按下
                   keyup:键盘弹起

                   mousedown:鼠标按下
                   mouseup:鼠标弹起
                   mouseover:鼠标经过
                   mousemove:鼠标移动
                   mouseout:鼠标离开

                   reset:表单重置
                   submit:表单提交

                   change:下拉列表选中项改变，或文本框内容改变
                   select:文本被选定

                   load:页面加载完毕（整个HTML页面中所有的元素全部加载完毕）

               任何一个事件都对应一个事件句柄，事件句柄是在事件之前添加on，事件句柄以属性的形式存在
               事件句柄出现在一个标签的属性位置上。

               在事件句柄上调用的函数叫做"回调函数(callback函数)"
           */
       function sayHello(){
           alert("hello js")
       }
       </script>
       
       <button type="button" οnclick="sayHello()">hello1</button>
       <input type="button" value="hello2" οnclick="sayHello()" />
       

       <input type="button" value="hello3" id="mybtn3"/>

       <input type="button" value="hello4" id="mybtn4"/>

       <input type="button" value="hello5" id="mybtn5"/>
       <script>
           function doSome(){
               alert("do some!")
           }
           /*
               第二种注册事件的方式：使用纯JS代码完成事件注册
           */
           //    第一步：首先获取按钮对象（document全部小写，是内置对象，可直接用，
           //                            document代表整个HTML页面）
           var btnObj = document.getElementById("mybtn");
           //    第二步：给按钮对象的onclick属性赋值（每个按钮对象都有onclick属性）
           //    这行代码的含义是：将回调函数doSome注册到click事件上
           btnObj.onclick = doSome; //"千万不要写小括号()",btnObj.onclick = doSome();这是错误写法

           var btnObj1 = document.getElementById("mybtn1");
           btnObj1.onclick = function(){ //这个函数没有名字，叫匿名函数，这个匿名函数也是一个回调函数
               alert("text.......") //这个函数在页面打开的时候只是注册到按钮上，不会被调用，只有onclick
           //事件发生之后才会被调用。
           }

           // 最常用的写法：
           document.getElementById("mybtn2").onclick = function(){
               alert("text、test、test........")
           }
       </script>
   </body>
</html>