JavaScript中的事件

1.单、双击事件
单击事件：onclick=”“;
双击事件：ondblclick=”“;
单击事件：在script中写一个对话框代码进行测试
script部分的代码如下：

<script type="text/javascript">
            function testOnclick(){
                alert("It is a nice day!");
            }
</script>

body部分设置一个按钮，当点击按钮时会弹出对话框

<body onload="testOnload()">
       <input type="button" value="单击事件" onclick="testOnclick()"/>
</body>

效果如下：
这里写图片描述
双击事件：在script中写一个对话框代码进行测试
script部分的代码如下：

function tetsOndblClick(){
                alert("How nice a day!");
            }

body部分设置一个按钮，当点击按钮时会弹出对话框

<input type="button" value="双击事件" ondblclick="tetsOndblClick()"/>

效果如下：
这里写图片描述
2.鼠标事件
onmousemove=”“—鼠标在监听区域移动就会触发
onmouseout=”“—鼠标离开侦听区域时触发
onmouseover=”“–鼠标从外面进入侦听区域会触发

script部分代码：

function testMouse(){
             alert("test!");    
            }

body部分代码：

<div class="box1" onmousemove="testMouse()">

       </div>

在style里面设置这个div的宽高：

<style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background: skyblue;

            }
    </style>

3.键盘事件
键盘的按下：
onkeydown=”“—所有键盘按下操作都会触发事件
onkeypress=”“—shift键、backpace键按下时不能触发
键盘的释放：
onkeyup=”“—按下键盘释放时触发事件

script部分的代码：

function onkeyUp(){
                alert("Thank you!");
            }
            function onkeyDown(){
                alert("You are so smart!");
            }
            function onkeyPress(){
                alert("Where are you go?")
            }

body部分的代码：

<input type="text" value="测试键盘的松开" onkeyup="onkeyUp()"/>
       <input type="text" value="测试键盘的按下" onkeydown="onkeyDown()"/>
       <input type="text" value="测试键盘的按下" onkeypress="onkeyPress()"/>

4.焦点事件
获取焦点：onfocus=””
失去焦点：onblur=”“

script部分的代码：

function testOnfocus(){
                alert("I miss you so!");
            }
            function testOnBlur(){
                alert("We are just liers!");
            }

body部分的代码：

<input type="text" value="测试获取焦点" onfocus="testOnfocus()"/>
       <input type="text" value="测试失去焦点" onblur="testOnBlur()"/>

5.加载事件:网页正在执行的时候，是将html文件加载到浏览器中
页面加载完成来触发事件：onload=”“

script部分的代码：

function testOnload(){
                alert("页面加载完成")
            }

body部分的代码：

<body onload="testOnload()">

整体代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>事件</title>
        <!--1.单、双击事件
              单击事件：onclick="";
              双击事件：ondblclick="";
            2.鼠标事件
                onmousemove=""---鼠标在监听区域移动就会触发
                onmouseout=""---鼠标离开侦听区域时触发
                onmouseover=""--鼠标从外面进入侦听区域会触发

            3.键盘事件
                  键盘的按下：
                  onkeydown=""---所有键盘按下操作都会触发事件
                  onkeypress=""---shift键、backpace键按下时不能触发
                  键盘的释放：
                  onkeyup=""---按下键盘释放时触发事件
            4.焦点事件
                获取焦点：onfocus=""
                失去焦点：onblur=""

            5.加载事件:网页正在执行的时候，是将html文件加载到浏览器中
                    页面加载完成来触发事件：onload=""


        -->
        <style type="text/css">
            .box1{
                width: 100px;
                height: 100px;
                background: skyblue;

            }
        </style>
        <script type="text/javascript">
            function testOnclick(){
                alert("It is a nice day!");
            }
            function tetsOndblClick(){
                alert("How nice a day!");
            }
            function testMouse(){
             alert("test!");    
            }
            function onkeyUp(){
                alert("Thank you!");
            }
            function onkeyDown(){
                alert("You are so smart!");
            }
            function onkeyPress(){
                alert("Where are you go?")
            }
            function testOnfocus(){
                alert("I miss you so!");
            }
            function testOnBlur(){
                alert("We are just liers!");
            }
//          function testOnload(){
//              alert("页面加载完成")
//          }

        </script>
    </head>
    <body onload="testOnload()">
       <input type="button" value="单击事件" onclick="testOnclick()"/>
       <input type="button" value="双击事件" ondblclick="tetsOndblClick()"/>
       <hr />
       <!-- <div class="box1" onmousemove="testMouse()">

       </div> -->
       <input type="text" value="测试键盘的松开" onkeyup="onkeyUp()"/>
       <input type="text" value="测试键盘的按下" onkeydown="onkeyDown()"/>
       <input type="text" value="测试键盘的按下" onkeypress="onkeyPress()"/>
       <hr />
       <!-- <input type="text" value="测试获取焦点" onfocus="testOnfocus()"/>
       <input type="text" value="测试失去焦点" onblur="testOnBlur()"/>
         -->

         <hr />


    </body>
</html>

猜你喜欢