js的事件机制学习1

bingmo_

已于 2022-02-23 17:05:46 修改

阅读量313

点赞数

分类专栏：前端文章标签： javascript 学习 html

于 2019-09-30 15:01:09 首次发布

本文链接：https://blog.csdn.net/bingmo_/article/details/101773185

版权

前端专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<html>
   <head>
      <title>js的事件机制学习1</title>
      <meta charset="UTF-8"/>
      <!--
         js的事件机制：
            解释：当我们的行为动作满足了一定的条件后，会触发某类事务的执行。
            作用：主要是结合js的函数来使用。
            内容:
               1、单双击事件
                  单击：onclick        当鼠标单击的时候会触发
                  双击：ondblclick     当鼠标双击的时候会被触发
               2、鼠标事件
                  onmouseover          当鼠标悬停在某个HTML元素上的时候触发
                  onmousemove          当鼠标在某个HTML元素上移动的时候触发
                  onmouseout       当鼠标在某个HTML元素上移出的时候触发
               3、键盘事件
                  onkeyup             当键盘在某个HTML元素上弹起的时候触发
                  onkeydown        当键盘在某个HTML元素上下压的时候触发
               4、焦点事件
                  onfocus             当某个HTML元素获取焦点的时候触发
                  onblur          当某个HTML元素失去焦点的时候触发
               5、页面加载事件         
                  onload          当页面加载成功后触发。
            注意:
               js中添加事件的第一种方式：
                  在HTML上直接使用事件属性进行添加，属性值为所监听执行的函数。
               js中的事件只有在当前HTML元素上有效。
               一个HTML元素可以添加多个不同的事件。
               一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
      -->
      <!--声明js代码域-->
      <script type="text/javascript">
         /*声明js函数*/
            //单击事件
               function testOnclick(){
                  alert("我是单击");
               }
            //测试双击
               function testOndblclick(){
                  alert("我是双击");
               }
            //鼠标事件
               function testOnmouseover(){
                  alert("我是鼠标悬停事件");
               }
               
               function testOnmousemove(){
                  alert("我被移动了");
               }
               
               function testOnmouseout(){
                  alert("我被移出了");
               }
            //键盘事件
               function testOnkeyup(){
                  alert("我是键盘弹起事件");
               }
               
               function testOnkeydown(){
                  alert("我是键盘按下事件");
               }
            //焦点事件
               function testOnfocus(){
                  document.getElementById("showdiv").innerHTML="哈哈";
                  alert("我是获取焦点事件");
               }
               
               function testOnblur(){
                  alert("我是失去焦点事件");
               }
            //页面加载
               function testOnload(){
                  alert("我是页面加载事件");
               }
            //测试
               function test(){
                  alert("测试一个事件的多个函数执行");
               }
      </script>
      <style type="text/css">
         #showdiv{
            width: 300px;
            height: 300px;
            border: solid 1px;
         }
      </style>
   </head>
   <body οnlοad="testOnload()">
      <h3>js的事件机制学习1</h3>
      <hr />
      <input type="button" name="" id="" value="测试单击" οnclick="testOnclick();test();" />
      <input type="button" name="" id="" value="测试双击" οndblclick="testOndblclick();" />
      <hr />
      <br /><br />
      <div id="showdiv" οnmοuseοver="testOnmouseover();" οnmοusemοve="testOnmousemove()" οnmοuseοut="testOnmouseout()">
         
      </div>
      <hr />
      键盘事件学习：    <br />
         键盘弹起事件：<input type="text" name="" id="" value="" οnkeyup="testOnkeyup();"/><br /><br />
         键盘下压事件： <input type="text" name="" id="" value="" οnkeydοwn="testOnkeydown()"/>
      <hr />
         焦点事件学习：<br />
            获取焦点： <input type="text" name="" id="" value="" οnfοcus="testOnfocus();"/><br /><br />
            失去焦点： <input type="text" name="" id="" value=""  οnblur="testOnblur();"/>
   </body>
</html>