事件概述和事件_事件演示

事件概述：

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

　　事件：某些操作，如：单击双击键盘按下了，鼠标移动了

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

　　监听器：代码

　　注册监听：将事件，事件源，监听器结合在一起，当事件源上发送某个事件，则触发执行某个监听器代码。

常见事件：

　　点击事件

　　　　onclick：单击事件

　　　　ondblclick：双击事件

　　焦点事件

　　　　onblur：失去焦点

　　　　onfocus：元素获得焦点

　　加载事件：

　　　　onload：一张页面或一幅图像完成加载

　　鼠标事件

　　　　 onmousedown：鼠标按钮被按下。

　　　　onmouseup：鼠标按键被松开。

　　　　onmousemove：鼠标被移动。

　　　　onmouseover：鼠标移到某元素之上。

　　　　onmouseout：鼠标从某元素移开。

　　键盘事件

　　　　onkeydown：某个键盘按键被按下。
　　　　onkeypress：某个键盘按键被按下并松开。
　　　　onkeyup：某个键盘按键被松开

　　选择和改变

　　　　onchange：域的内容被改变时触发( <input>, <keygen>, <select>, 和 <textarea>

　　　　onselect：文本被选中

　　表单事件

　　　　onsubmit：表单提交时触发

　　　　onreset：表单重置时触发

事件_事件演示：

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

代码实现：

<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        /*
            常见事件：
            　　点击事件
            　　　　onclick：单击事件
            　　　　ondblclick：双击事件
            　　焦点事件
            　　　　onblur：失去焦点
                       一般用于表单验证
            　　　　onfocus：元素获得焦点
            　　加载事件：
            　　　　onload：一张页面或一幅图像完成加载
            　　鼠标事件
            　　　　 onmousedown：鼠标按钮被按下。
                        定义方法时，定义一个形参，接收event对象
                        event对象的button属性可以获取鼠标按钮键被点击了
             　　　　onmouseup：鼠标按键被松开。
             　　　　onmousemove：鼠标被移动。
             　　　　onmouseover：鼠标移到某元素之上。
             　　　　onmouseout：鼠标从某元素移开。
            　　键盘事件
            　　　　onkeydown：某个键盘按键被按下。
            　　　　onkeypress：某个键盘按键被按下并松开。
            　　　　onkeyup：某个键盘按键被松开
            　　选择和改变
            　　　　onchange：域的内容被改变时触发( <input>, <keygen>, <select>, 和 <textarea>
            　　　　onselect：文本被选中
            　　表单事件
            　　　　onsubmit：表单提交时触发
                       可以阻止表单提交
                            方法返回false则表单被阻止
            　　　　onreset：表单重置时触发
         */
        //2.加载事件 onload
        window.onload=function () {
            //1.失去焦点 onblur
            document.getElementById("username").onblur = function () {
                // alert("失去焦点了...")
            }
            //3.绑定鼠标移动元素之上事件 onmouseover
            document.getElementById("username").onmouseover = function () {
                // alert("鼠标来了...")
            }
            // 绑定鼠标点击事件 onmousedown
            document.getElementById("username").onmousedown = function (event) {
                // alert("鼠标点击了...")
                // alert(event.button);
            }
            document.getElementById("username").onmouseout = function () { // onmouseout：鼠标从某元素移开。
                // alert("鼠标移开了...")
            }

            //4.键盘事件
            document.getElementById("username").onkeydown = function (event) {
                // alert(event.keyCode);
                if(event.keyCode == 13){
                    alert("提交表单")
                }
            }

            //5.选择和改变事件
            document.getElementById("city").onchange = function (){
                alert("改变了...")
            }

            //6.表单事件
            //第一种写法
            document.getElementById("from").onsubmit = function () {
                //校验用户名格式是否正确
                // var  flag = false;
                // return flag;
            }
        }
        //第二种写法
        function checkForm() {
            return true;
        }
    </script>
</head>
<body>

    <form action="#" id="from" onclick="return checkForm();">
        <input type="text" name="username" id="username">
        <select id="city">
            <option>--请选择--</option>
            <option>北京</option>
            <option>杭州</option>
            <option>河南</option>
        </select>
        <input type="submit" value="提交">
    </form>



</body>