事件的概述以及常见事件的演示

事件的概述

概念：某些组件被执行了某些操作后，触发某些代码的执行

　　事件：某些操作。如：单击，双击

　　事件源：组件。如：按钮，文本输入框

　　监听器：代码。

　　注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件后，则触发某个监听器代码

常见的事件：

　　1、点击事件

　　　　1、onclick：单击事件

　　　　2、ondblclick：双击事件

　　2、焦点事件

　　　　1、onblur：失去焦点

　　　　2、onfocus：元素获得焦点

　　3、加载事件

　　　　1、onload：一张页面或一张图片完成加载

　　4、鼠标事件

　　　　1、onmousedown：鼠标按键被按下

　　　　2、onmouseup：鼠标按键被松开

　　　　3、onmousemove：鼠标被移动

　　　　4、onmouseover：鼠标移到某元素之上

　　　　5、onmouseout：鼠标从某元素移开

　　5、键盘事件

　　　　1、onkeydown：某个键盘按键被按下

　　　　2、onkeyup：某个键盘按键被松开

　　　　3、onkeypress：某个键盘按键被按下并松开

　　6、选择和改变

　　　　1、onchange：域的内容被改变

　　　　2、onselect：文本被选中

　　7、表单事件

　　　　1、onsubmit：确认按钮被点击

　　　　2、onreset：重置按钮被点击

常见事件的演示

常见的事件：
　　1、点击事件
　　　　1、onclick：单击事件
　　　　2、ondblclick：双击事件
　　2、焦点事件
　　　　1、onblur：失去焦点
            一般用于表单验证
　　　　2、onfocus：元素获得焦点
　　3、加载事件
　　　　1、onload：一张页面或一张图片完成加载
　　4、鼠标事件
　　　　1、onmousedown：鼠标按键被按下
            定义方法时，定义一个形参，接收event对象
            event对象的button属性可以获取鼠标按钮被点击了
　　　　2、onmouseup：鼠标按键被松开
　　　　3、onmousemove：鼠标被移动
　　　　4、onmouseover：鼠标移到某元素之上
　　　　5、onmouseout：鼠标从某元素移开
　　5、键盘事件
　　　　1、onkeydown：某个键盘按键被按下
　　　　2、onkeyup：某个键盘按键被松开
　　　　3、onkeypress：某个键盘按键被按下并松开
　　6、选择和改变
　　　　1、onchange：域的内容被改变
　　　　2、onselect：文本被选中
　　7、表单事件
　　　　1、onsubmit：确认按钮被点击
            可以阻止表单的提交
                方法返回false则表单被阻止提交
　　　　2、onreset：重置按钮被点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
        常见的事件：
        　　1、点击事件
        　　　　1、onclick：单击事件
        　　　　2、ondblclick：双击事件
        　　2、焦点事件
        　　　　1、onblur：失去焦点
                    一般用于表单验证
        　　　　2、onfocus：元素获得焦点
        　　3、加载事件
        　　　　1、onload：一张页面或一张图片完成加载
        　　4、鼠标事件
        　　　　1、onmousedown：鼠标按键被按下
                    定义方法时，定义一个形参，接收event对象
                    event对象的button属性可以获取鼠标按钮被点击了
        　　　　2、onmouseup：鼠标按键被松开
        　　　　3、onmousemove：鼠标被移动
        　　　　4、onmouseover：鼠标移到某元素之上
        　　　　5、onmouseout：鼠标从某元素移开
        　　5、键盘事件
        　　　　1、onkeydown：某个键盘按键被按下
        　　　　2、onkeyup：某个键盘按键被松开
        　　　　3、onkeypress：某个键盘按键被按下并松开
        　　6、选择和改变
        　　　　1、onchange：域的内容被改变
        　　　　2、onselect：文本被选中
        　　7、表单事件
        　　　　1、onsubmit：确认按钮被点击
                    可以阻止表单的提交
                        方法返回false则表单被阻止提交
        　　　　2、onreset：重置按钮被点击
         */

        //onload：一张页面或一张图片完成加载
        window.onload = function () {
            //onblur：失去焦点
            // document.getElementById("username").onblur = function () {
            //     alert("失去焦点")
            // }
            //
            // //onmouseover：鼠标移到某元素之上
            // document.getElementById("username").onmouseover = function () {
            //     alert("鼠标移到之上")
            // }
            //
            // //onmousedown：鼠标按键被按下
            // document.getElementById("username").onmousedown = function () {
            //     alert("鼠标按下")
            //     alert(event.button);
            // }

            //onkeydown：某个键盘按键被按下
            document.getElementById("username").onkeydown = function () {
                // alert("键盘按下")
                // alert(event.keyCode);
                if (event.keyCode==13){
                    alert("提交表单")
                }
            }

            //onchange：域的内容被改变
            document.getElementById("username").onchange = function () {
                alert("改变了")
            }

            //onsubmit：确认按钮被点击
            document.getElementById("form").onsubmit = function () {
                //校验用户名格式是否正确
                var flag = true;
            }

            function checkForm() {
                return false;
            }
        }
    </script>
</head>
<body>
    <form action="#" id="form" onclick="return checkForm()">
    <input name="username" id="username">

    <select id="city">
        <option>--请选择--</option>
        <option>北京</option>
        <option>上海</option>
        <option>西安</option>
    </select>
        <input type="submit" value="提交">
    </form>
</body>
</html>