JavaScript中常用事件的类型

JavaScript中常用事件的类型


1.表单事件

1).submit:提交

2).reset:重置

3).change:内容改变且失去焦点时触发

4).input:内容改变时触发(兼容性不好)

注: submit和reset通常是绑定到form表单中使用的,change通常用于input和selcet表单中

<script>
    window.onload = function () {
        var form = document.getElementsByTagName("form")[0]
        form.onsubmit = function () {
            alert("submit事件已触发")
            //阻止默认提交事件
            return false;
        }
        form.onreset = function () {
            alert("reset事件已触发")
            //阻止默认提交事件
            return false;
        }
        form.onchange = function () {
            alert("change事件已触发")
        }
         form.oninput = function () {
            console.info("input事件已触发")
        }
    }
</script>
<body>
<form method="get" action="">
    <ul>
        <li>用户名:<input type="text"></li>
        <li>&nbsp;&nbsp;码:<input type="password"></li>
        <li><input type="submit" value="提交"><input type="reset" value="重置"></li>
    </ul>
</form>
</body>

2.UI事件

1).load:页面加载完毕后触发

2).unload:页面卸载时触发(没啥意义)

3).beforeunload:页面卸载前触发

4).select:选中时触发,通常应用于input

5).resize:窗口大小改变时触发,一般绑定在window

6).scroll:有滚动时触发,一般绑定在window

核心代码演示:
<script>
        window.onload = function () {
            var input = document.getElementsByTagName("input")[0]
            input.onselect =function(){
                alert("文本被选中了")
            }
            window.onresize = function () {
                alert("窗口大小发生了改变!")
            }
            window.onscroll = function () {
                console.info("窗口滚动中......")
            }
        }
    </script>
    <body>
        <input type="text">
    </body>

3.焦点事件

1).focus: 获取焦点

应用: 光标定位输入框输入内容

2).blur:失去焦点

应用: 输入框输入内容的局部刷新

核心代码演示:
<script>
    window.onload = function () {
        // 获取输入框
        var input = document.getElementsByTagName("input")[0]
        // 为input注册事件
        input.onfocus = function () {
            alert("input输入框获得了焦点!!")
        }
        input.onblur = function () {
            alert("input输入框失去了焦点!!")
        }
    }
</script>
<body>
<input type="text">
</body>

4.鼠标事件

1).click:鼠标点击

2).mouseover:鼠标悬停

3).mouseout:鼠标离开

4).mousedown:鼠标按下

5).mouseup:鼠标抬起

6).mousemove:鼠标移动

注: 鼠标事件应用比较多

核心代码演示:
<script>
    window.onload = function () {
        //获取元素,测试功能时请注释其他功能
        var btn = document.getElementsByTagName("input")[0]
        btn.onclick = function () {
           alert("鼠标点击")
        }
        btn.onmousemove = function () {
            alert("鼠标悬停")
        }
        btn.onmouseout = function () {
            alert("鼠标离开")
        }
        btn.onmousedown = function () {
            alert("鼠标按下")
        }
        btn.onmousedup = function () {
            alert("鼠标抬起")
        } 
        btn.onmousemove = function () {
            alert("鼠标移动")
        }
    }
</script>
<body>
<input type="button" value="鼠标事件">
</body>

5.键盘事件

1).keydown:可响应所有键按下

2).keyup:只响应字符键按下

3).keypress:键盘弹起

注: 键盘事件在web开发应用比较少,在游戏开发中用的比较多

核心代码演示:
  <script>
        window.onload = function () {
            document.onkeydown = function () {
                console.info("键盘按下去了!")
            }
            document.onkeyup = function () {
                console.innfo("键盘抬起来了")
            }
        }
    </script>

注: 本文为个人学习笔记,如有不当,还望留言更正,共同学习进步。

你可能感兴趣的:(JS,事件)