加载事件

onload：一张页面或一幅图像完成加载
　　事件会在页面或图像加载完成后立即发生。
　　通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*常见的事件
        * 1.点击事件
        *   onclick        当用户点击某个对象时调用的事件句柄。
        *   ondblclick    当用户双击某个对象时调用的事件句柄。
        * 2.焦点事件
        *   onblur    元素失去焦点时触发
        *   onfocus    元素获取焦点时触发
        * 3.加载事件
        *    onload：一张页面或一幅图像完成加载
        * 4.鼠标事件
        *   oncontextmenu   在用户点击鼠标右键打开上下文菜单时触发。
        *   onmousedown     鼠标按钮被按下。
        *   onmouseup       鼠标按键被松开。
        *   onmousemove     鼠标被移动。
        *   onmouseover     鼠标移到某元素之上。
        *   onmouseout      鼠标从某元素移开。
        *   onmouseenter    当鼠标指针移动到元素上时触发。
        *   onmouseleave    当鼠标指针移出元素时触发
        * 5.键盘事件
        *   onkeydown    某个键盘按键被按下。
        *   onkeyup        某个键盘按键被松开。
        *   onkeypress    某个键盘按键被按下并松开。
        * 6.选中和改变
        *   onselect      用户选取文本时触发 ( <input> 和 <textarea>)
        *   onchange      该事件在表单元素的内容改变时触发( <input>,<keygen>,<select>, 和 <textarea>)
        * 7.表单事件
        *   onsubmit    表单提交时触发
        *   onreset        表单重置时触发
        * **/

        //2.onload：一张页面或一幅图像完成加载
        //窗口整体加载完成，再执行代码
        window.onload = function () {
            //1.onblur    元素失去焦点时触发,用户点到其他元素上的时候
            //一般用于表单校验。例如：输入用户名判断是否合法，密码安全系数
            document.getElementById("username").onblur = function () {
                alert("失去焦点");
            }

            //3.绑定鼠标事件
            onmouseover     鼠标移到某元素之上。
            document.getElementById("username").onmouseover = function () {
                alert("鼠标来了");
            }

            //4.onmousedown鼠标按钮被按下,会传入一个对象event（事件对象）,方法参数随便起名也行
             document.getElementById("username").onmousedown = function (event) {
                 //alert("鼠标按下了");
                 alert(event.button);
             }

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

            //6.onchange该事件在表单元素的内容改变时触发
            document.getElementById("username").onchange = function (event) {
                alert("数据被改变");
            }

            document.getElementById("city").onchange = function (event) {
                alert("数据被改变");
            }

            //7.onsubmit    表单提交时触发
            document.getElementById("form").onsubmit = function () {
                //校验用户名格式是否正确
                var flag = true;
                //返回true或者不返回就能被提交，返回false就无法提交
                return flag;
            }
            function checkForm() {
                return false;
            } 
        }
    </script>
</head>
<body>

<form id="form" action="#" onclick="return checkForm();">

    <input id="username" name="username" type="text">

    <select name="" id="city">
        <option value="">选择城市</option>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">杭州</option>
    </select>

    <input type="submit" value="提交">
</form>
</body>
</html>

posted @ 2020-02-28 20:26 风萧萧路漫漫阅读(334) 评论(0) 收藏举报

刷新页面返回顶部

风萧萧路漫漫

这世间有诸多痛楚，诸多不公，只有咬着牙，忍常人所不能忍，才能为常人所不能为。

加载事件