JavaScript常用事件的类型演示

目录

    • (一).表单事件
    • (二).UI事件
    • (四).鼠标事件
    • (五).键盘事件

(一).表单事件

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>

(二).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>

(四).鼠标事件

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>

(五).键盘事件

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>

最后

总结不易,希望小宝们不要嫌弃哦!

你可能感兴趣的:(javascript,前端,开发语言)