表单事件

2017-04-20  本文已影响0人  洛洛kkkkkk
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <form action="http://www.baidu.com" method="">
            <input type="text" id="uname" value="请输入账号"/>
            <input type="submit" value="提交按钮" />
            <input type="reset" value="重置" />
        </form>
    </body>
    <script type="text/javascript">
        var form =document.querySelector('form');
        var unameInput = document.querySelector("#uname");
        //输入框的焦点事件
        unameInput.onfocus = function () {
            console.log("点击了输入框");
            this.value="";
        }
        //表单被重置的时候执行的事件
        form.onreset = function () {
            console.log("被重置了吧");
        }
        
        form.onsubmit = function (ev) {
            //获取表单事件对象
            var e=ev|| event;
            alert("点击了提交按钮");
            //默认事件
            //浏览器里面右键默认事件-展示菜单
            
            //阻止默认 事件。
//          return false;
            //阻止默认事件的另一种方式 不兼容IE6-8
            e.preventDefault();
        }
        window.onresize = function () {
            console.log("ssda");
        }
    </script>
</html>
上一篇下一篇

猜你喜欢

热点阅读