lovecoding
/
Java0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 鼠标事件
        function fun1() {
            console.log("单击了")
        }
        function fun2() {
            console.log("单击了2次")
        }
        function fun3() {
            console.log("双击了")
        }
        function fun4() {
            console.log("鼠标悬停了")
        }
        function fun5() {
            console.log("鼠标移动了")
        }
        function fun6() {
            console.log("鼠标离开了")
        }

        // 键盘事件
        function fun7() {
            console.log("键盘按下了")
        }
        function fun8() {
            console.log("键盘抬起了")
        }

        // 表单事件
        function func1() {
            console.log("获得焦点了")
        }
        function func2() {
            console.log("失去焦点了")
        }
        function func3(value) {
            console.log("内容改变为：" + value)
        }
        function func4(value) {
            console.log("选项改变为：" + value)
        }
        function func5() {
            console.log("表单重置了")
        }

        function func6() {
            alert("表单提交了")
            /*
            弹窗的三种方式
             alert() 信息提示框
             prompt() 信息输入框
             confirm() 信息确认框
            */
            var flag = confirm("确定要提交表单吗")
            if(!flag){
                return false
            }
            return true
        }
    </script>
</head>

<body>
    <!-- 
        这里的点击操作 是一个事件（就是行为的发生，可能是用户的，可能是浏览器的） 
        分为鼠标事件、键盘事件、表单事件等
    -->
    <input type="button" value="按钮" onclick="fun1(),fun2()" ondblclick="fun3()" />
    <br />
    <!-- onmouseover 鼠标在图片之上 悬停  onmousemove 鼠标在图片上移动  onmouseleave 鼠标离开的图片 -->
    <img src="img/java.jpg" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()" />
    <br />

    <input type="text" onkeydown="fun7()" onkeyup="fun8()" />
    <br>
    <br>
    <!-- return 是将结果返回给浏览器 -->
    <form action="01-dom.html" method="get" onreset="func5()" onsubmit="return func6()">
        用户名：<input type="text" name="realname" onfocus="func1()" onblur="func2()" onchange="func3(this.value)" /> <br />
        账户名：<input type="text" name="loginname" /> <br />
        选择籍贯：
        <select onchange="func4(this.value)">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">哈尔滨</option>
        </select>
        <br/>
        <input type="submit" value="提交" />
        <input type="reset" value="清空" />
    </form>
</body>

</html>