鼠标键盘点击松开事件操作

<title>事件操作</title> <style> .div{ height: 400px; width: 400px; background: red; font-size: 30px; }

</style>
<script>
    /*
          1. 鼠标事件
             ​	 鼠标按键按下： onmousedown
             ​    鼠标按键松开： onmouseup
             ​    鼠标离开：    onmouseout
             ​    鼠标移动：    onmousemove
             ​    鼠标悬浮到某元素上：onmouseover
          2. 键盘事件
             ​	 键盘按下：      onkeydown
             ​    键盘松开：      onkeyup
             ​    键盘按下并松开： onkeypress

         3. 表单事件
 ​	            表单提交：onsubmit
 ​               表单重置：onreset
         4.  选择和改变事件
                onchange    文本内容发生改变触发
                onselect    文本被选中触发
     */
    // 让页面重新加载
    window.onload = function () {
        var input = document.getElementsByTagName("input")[0];
        // 事件绑定
        /*input.onmousedown = function () {
            //alert("鼠标被按下了！");
            input.value = "鼠标被按下了";
        }
        input.onmouseup = function () {
            input.value = "鼠标松开了";
        }

        input.onmouseout = function () {
            input.value = "鼠标离开了";
        }*/

        /*input.onmouseleave = function () {
            input.value = "鼠标从该标签离开了";
        }*/
        /*input.onmouseover = function () {
            input.value = "鼠标悬浮了";
        }*/

        /*input.onkeydown = function () {
            alert("键盘被按下了");
        }*/

       /* input.onkeyup = function () {
            alert("键盘松开了");
        }*/

       /* input.onkeypress = function () {
            alert("键盘按下并松开");
        }*/
        var form = document.getElementsByTagName("form")[0];
        // 绑定表单提交事件
        /*form.onsubmit = function () {
            alert("表单被提交了");
        }*/

        form.onreset = function () {
            alert("表单被重置了");
        }

        // 选择和改变事件
        input.onchange = function () {
            input.style.border = "3px solid red";
        }

        input.onselect = function () {
            alert("文本被选中了。。");
        }



      var select = document.getElementsByTagName("option");
        for (var i = 0; i <select.length; i++) {
            select[i].onselect = function () {
                alert("被选择了");
            }
        }

        var date = document.getElementById("date");
        var flag = true;
        date.onblur = function () {
            alert("进来了");
            var inputs = document.getElementsByClassName("text");
            for (var i = 0; i <inputs.length ; i++) {
                if (inputs[i].value == "" || inputs[i].value == null) {
                    form.disabled = true;// 真失效
                    flag = false;
                }
            }
            if (flag) {
                document.getElementById("one").disabled = false;// 可以使用
            }

        }


    }

    function commit() {
        alert("此时表单准备提交！");
        return true;// 不提交
    }

</script>

 <select multiple="multiple">
     <option>-&#45;&#45;请选择专业-&#45;&#45;</option>
     <option value = "t1">计算机科学与工程</option>
     <option value = "t2">通信工程</option>
     <option value = "t3">软件工程</option>
     <option value = "t4">物联网</option>
     <option value = "t5">人工智能</option>
     &lt;!&ndash;离散数学  编译原理  汇编语言  数据结构与算法  &ndash;&gt;
 </select>
 <form action="#" method="get" onsubmit="return commit();">

     <input  class="text" type="text">
     <input  class="text" type="password">
     <input  class="text" type="date" id="date">
     <input  id="one"  type="submit" disabled>
 </form>