一、鼠标事件

（1）单击 onclick
（2）双击 ondblclick
（3）按下 onmousedown
（4）抬起 onmouseup
（5）鼠标悬停 onmouseover
（6）鼠标离开 onmouseout
鼠标进入事件 onmouseenter
鼠标离开事件 onmouseleave
onmouseover/onmouseout 与 onmouseenter/onmouseleave区别
onmouseover/onmouseout 支持冒泡 由内向外
onmouseenter/onmouseleave 不支持冒泡 由外向内
阻止冒泡：event.stopPropagation();

二、键盘事件

（1）按anonkeypress 检测不到功能键
（2）按下onkeydown 能监测用户按下的功能键
（3）抬起onkeyup 能检测到用户按下的功能键
任何事件触发时，都会产生一个事件对象，系统会为事件对象传实参，实参是由注册的什么事件决定的,
当注册点击事件时，传的就是点击事件，注册的是键盘事件，传的就是键盘事件。

三、window的相关事件

1.文档加载完成事件

window.onload = function(){
代码;
}
文档执行顺序：从左至右 由上至下

2.窗口大小重置（改变）事件

window.onresize = function(){
console.log(内容);
// 标准浏览器的平台调试方法
}

  1. <script>
  2.        // 窗口大小重置事件
  3.         window.onresize = function(){
  4.             console.log(window.innerWidth+":"+window.innerHeight);
  6.         }
  7. </script>

演示图
image.png

3.滚动条滚动事件

window.onscroll = function(){
console.log(“火狐：”+document.documentElement.scrollTop);
}
查看浏览器内核的方法：navigator.userAgent
如 何 判 断 浏 览 器 ：
navigator.userAgent.indexOf(“Firefox”)>-1 火狐浏览器
navigator.userAgent.indexOf(“Chrome”)>-1 谷歌浏览器
navigator.userAgent.indexOf(“MSIE”)>-1 IE 浏览器

  1. <script>
  2.         window.onscroll = function(){
  3.             var xx = navigator.userAgent;
  5.             if(xx.indexOf("Chrome") > -1){
  6.                 //google
  8.                 console.log("谷歌："+document.getElementsByTagName("body")[0].scrollTop);
  9.             }else if(xx.indexOf("Firefox") > -1){
  10.                 //Firefox
  12.                 console.log("火狐："+document.documentElement.scrollTop);
  13.             } else if(xx.indexOf("MSIE") > -1){
  14.                 //IE
  16.                 alert("IE 浏览器:"+document.documentElement.scrollTop);
  17.             }
  18.         }
  19. </script>

四、form表单的提交事件

方法：
Form 对象.onsubmit = function(){
return false; //阻止表单提交
}
注意：点击 submit 按钮时，会触发 form 上的 submit 事件。

<body>
    <form action="a.php">
        用户名：
        <input type="text" id="YHM"><br>
        密个码：
        <input type="password" id="PSW1"><br>

        <input type="submit" value="提交" id="TiJiao">
    </form>
    <script>
        var form = document.getElementsByTagName("form")[0];
        var YHM = document.getElementById("YHM");
        var TiJiao = document.getElementById("TiJiao");

        form.onsubmit = function(){
            // return false;

            if(YHM.value == ""){
                alert("用户名不可以为空");
                return false;

            }else if(PSW1.value == ""){
                alert("密码不可以为空");
                return false;

            }
        }
</script>
</body>

五、特殊事件

1.聚焦、失焦事件

聚焦：HTML 对象.onfocus=function(){}
失焦：HTML 对象.onblur=function(){}

2.内容改变事件（*Firefox）

Html 对象.onchange=function(){}
*多用于select标签内容的改变

1)select的长度属性

  select对象.length;  //可重新赋值 如果等于0 等于清空option

2)取出select下option的相关内容

  select对象.options[下标].innerHTML<br />      select对象.options[下标].value

3)取得选择的option对应的位置下标（索引）

  Select 对象.selectedIndex;

4)创建新的option HTML方法

  var 变量 = new Option();<br />      将新的option添加进去 对象.options[新位置] = 变量;

<body>
    <select name="" id="Sheng">
        <option value="">黑龙江省</option>
        <option value="">吉林省</option>
        <option value="">辽宁省</option>
    </select>

    <script>
        document.getElementById("Sheng").onchange = function(){
            // 设置新长度
            this.length = 4;
            // 创建新的option 存在内存里
            var newOpt = new Option();
            // 改变新option的内容与值
            newOpt.innerHTML = "河北省";
            newOpt.value = "hebei";
            // 将新的option放到新的位置上
            this.options[3] = newOpt;

        }
</script>
</body>

演示—城市二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select name="" id="Sheng">
        <option value="">黑龙江省</option>
        <option value="">吉林省</option>
        <option value="">辽宁省</option>
    </select>

    <select name="" id="Shi">
        <option value="">哈尔滨</option>
        <option value="">大庆</option>
        <option value="">齐齐哈尔</option>
    </select>


    <script>
        // 从PHP的数据库中提取
        var chengShi = [
            ["哈尔滨","大庆","齐齐哈尔"],
            ["长春","四平","吉林"],
            ["沈阳","大连","铁岭"]
        ];




        var Sheng = document.getElementById("Sheng"),
            Shi = document.getElementById("Shi");

        // 点击省对象下拉菜单内容，改变事件
        Sheng.onchange = function(){

            // xb （看点谁 黑龙江0 吉林1 辽宁2）
            // 对象.selectedIndex        取得选择的option对应的位置下标（索引） 
            var xb = this.selectedIndex;

            //    shuJu                     代表的是chengShi数组中的子数组
            // chengShi[xb]                取出chengShi数组中的子数组
            var shuJu = chengShi[xb];

            // 为了清空Shi对象下拉菜单中的数据
            Shi.length = 0;

            // 取出子数组中的每一个数据
            for(var i = 0;i < shuJu.length;i++){

                // 建立一个叫csOpt的option
                var csOpt = new Option();            

                // 给新建的option里面放内容
                // shuJu[i]        分别放入新的option中                
                csOpt.innerHTML = shuJu[i];
                csOpt.value = shuJu[i];

                // 把新的option(带内容的)放入清过0的Shi中
                Shi.options[i] = csOpt;
            }
        }
</script>
</body>
</html>