JavaScript中的事件

一、什么是事件？什么又是事件的绑定和触发？

能被浏览器识别到的人或者浏览器本身的行为,人对浏览器或者浏览器对网页做了什么操作,JavaScript可以根据不同行为，绑定一些不同的响应代码，让浏览器和人的行为之间产生交互。而事件的绑定和触发则是给页面上的元素先绑定事件 然后通过行为去触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件绑定</title>
        <script type="text/javascript">
            function func01(){
                console.log('执行了func01')
            }
            
            function func02(){
                console.log('执行了func02')
            }
            
            function func03(){
                console.log('执行了func03')
            }
        </script>
    </head>
    <body>
        <!-- 单机按钮执行单个函数-->
        <button type="button" onclick="func01()">单击单个函数</button>
        <!-- 单机按钮同时执行多个函数，多个函数直接使用逗号隔开 -->
        <button type="button" onclick="func01(),func02()">单击执行多个函数</button>
        
        <!-- 设置鼠标悬停时，执行的代码 -->
        <button type="button" onmouseover="func03()">悬停</button>
    </body>
</html>

二、事件的演示

1.鼠标事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鼠标事件</title>
        <style type="text/css">
            #mydiv{
                width: 100px;
                height: 100px;
                background-color: cornflowerblue;
            }
        </style>
        
        <script type="text/javascript">
            function func01(){
                console.log('鼠标双击调用');
            }
            function func02(){
                console.log('鼠标按下调用');
            }
            function func03(){
                console.log('当鼠标指针移动到元素上时触发。');
            }
            function func04(){
                console.log('当鼠标指针移出元素时触发');
            }
            function func05(){
                console.log('鼠标被移动')
            }
            function func06(){
                console.log('鼠标移到某元素之上')
            }
            function func07(){
                console.log('鼠标从某元素移开。')
            }
            function func08(){
                console.log('鼠标按键被松开。')
            }
        </script>
    </head>
    <body>
        <div id="mydiv" 
        ondblclick="func01()" 
        onmousedown="func02()"
        onmouseenter="func03()"
        onmouseleave="func04()"
        onmousemove="func05()"
        onmouseover="func06()"
        onmouseout="func07()"
        onmouseup="func08()"
        >
            
        </div>
    </body>
</html>

2.键盘事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function func01(){
                console.log('某个键盘按键被按下')
            }
            function func02(){
                console.log('某个键盘按键被按下并松开。')
            }
            function func03(){
                console.log('某个键盘按键被松开。')
            }
        </script>
    </head>
    <body>
        <input type="text" onkeydown="func01()" onkeypress="func02()" onkeyup="func03()"/>
    </body>
</html>

3.表单事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单事件</title>
        <script type="text/javascript">
            function fun1(){
                console.log('获得焦点')
            }
            function fun2(){
                console.log('失去焦点')
            }
            function fun3(){
                console.log('正在输入')
            }
            function fun4(){
                console.log('内容改变')
            }
            function fun5(ctiy){
                console.log('输入了内容'+ctiy.value)
            }
            function fun6(){
                console.log('内容发生了重置')
            }
            function fun7(){
                alert('输入了内容提交')
                //可以根据一些条件判断是否要提交
                return true;
            }
            
        </script>
    </head>
    <body>
        <form action="http://www.baidu.com" method="get" onreset="fun6()" onsubmit="fun7()">
            <input type="text" name='uname' onfocus="fun1()" onblur="fun2()" oninput="fun3()" onchange="fun4()" />
            <select name="city" onchange="fun5(this)">
                <option selected="selected">----请选择城市----</option>
                <option value="0">北京</option>
                <option value="1">天津</option>
                <option value="2">上海</option>
                <option value="3">重庆</option>
            </select>
            
            <input type="reset" value="重置" />
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

4.页面加载事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面加载事件</title>
        <script type="text/javascript">
            function f1(){
                //根据id获取元素对象
                var hello = document.getElementById('hello');
                var v1 = hello.value;
                console.log(v1);
            }
            
            f1()
        </script>
    </head>
    <body onload="f1()">  
        <!-- 
        上述写法，由于先扫描的执行f1调用，但是页面中input标签并没有加载，所有会报错
         解决方案：1.将script挪到body标签中。2.来一个页面加载器 onload="f1()
         -->
        <input type="text" id="hello" value="马大师" />
    </body>
</html>
posted @ 2021-11-23 10:56  酒剑仙*  阅读(38)  评论(0)    收藏  举报