JavaScript | 事件方法

最新推荐文章于 2024-08-26 09:13:28 发布

Bravo！！！

最新推荐文章于 2024-08-26 09:13:28 发布

阅读量180

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107900753

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、事件方法

1.select() //获取焦点后选中区域

<body>
    <form action="">
        <p>用户名：</p>
        <p><input type="text" id="username" value="zyd" /></p>
    </form>
</body>
<script>
    uobj=document.getElementById('username');
    uobj.onfocus=function(){
        this.select();
    }
</script>

2.blur() //失去焦点

<body>
    <form action="">
        <p>用户名：</p>
        <p><input type="text" id="username" value="zyd" /></p>
    </form>
</body>
<script>
    uobj=document.getElementById('username');
    uobj.onkeydown=function(event){
        kc=event.keyCode;
        document.title=kc;
        if(kc==32){ //空格键的ASCII码为32
            this.blur(); //按下空格键后失去焦点
        }
    }
</script>

3.focus() //获得焦点

<body>
    <form action="">
        <p>用户名：</p>
        <p><input type="text" id="username"  /></p>
    </form>
</body>
<script>
    uobj=document.getElementById('username');
    uobj.focus(); //打开/刷新页面即获得焦点
</script>

4.click() //点击指定元素

<html>
<head>
    <meta charset="UTF-8" />
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
        #upid{
            cursor: pointer;
        }
        #fid{
            display: none;  /*隐藏文件上传的原有图标*/
        }
    </style>
</head>
<body>
    <form action="">
        <p>上传文件：</p>
        <p><input type="file" id="fid" ></p>
        <p><img src="up.png" id="upid"></p>
        <p><input type="submit" value="OK" ></p>
    </form>
</body>
<script>
    uobj=document.getElementById('fid');
    upobj=document.getElementById('upid');
    upobj.onclick=function(){ //点击up.png实际点击fid的选择文件
        fid.click();
    }
</script>
</html>

5.submit() //提交

6.reset() //重置

<html>
<head>
    <meta charset="UTF-8" />
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
    <form action="go.php" id="fid">
        <p>用户名：</p>
        <p><input type="textarea" id="tid" ></p>
    </form>
    <button id="submit">OK</button>
    <button id="reset">Cancel</button>
</body>
<script>
    fobj=document.getElementById('fid');
    suobj=document.getElementById('submit');
    reobj=document.getElementById('reset')

    suobj.onclick=function(){
        fobj.submit();//提交form表单的内容
    }
    reobj.onclick=function(){
        fobj.reset();//重置form表单的内容
    }
</script>
</html>