JS表单事件（焦点事件/触发事件）

最新推荐文章于 2024-09-10 13:24:07 发布

星灭233

最新推荐文章于 2024-09-10 13:24:07 发布

阅读量1k

点赞数 1

分类专栏： jQuery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/ksx2333/article/details/115495337

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

- 1 方法
- 2 源码展示

1 方法

onfocus获得焦点 this.focus();
onblur失去焦点 this.blur();
onchange改动触发事件 this.change();
onselect当选中时触发事件 this.select();

2 源码展示

<body>
    <input type="text" id="demo" /><br />
    <button id="btn">主动触发焦点事件</button><br>
    <hr />
    <select name="" id="sl">
        <option value="郑州">郑州</option>
        <option value="开封">开封</option>
        <option value="洛阳">洛阳</option>
    </select>
    <br />
    <input type="file" id="file" />
    <input type="text" id="se" value="123232323">
</body>
<script>
    /************ js原生 ***************************/
    // var demo=document.getElementById("demo")
    // //焦点事件
    // demo.οnfοcus=function(){
    //   console.log("焦点事件")
    // }
    // demo.onblur =function(){
    //   console.log("失去焦点事件")
    // }
    /************* 02 jquery中的焦点事件 ********************/
    $("#demo").focus(function () {
        console.log("焦点事件")
    })
    $("#demo").blur(function () {
        console.log("失去焦点")
        //$("#demo").css("background","blue")//可以添加额外动态情况
    })

    /************* 03 主动触发焦点********************************/
    $("#btn").click(function () {
        //trigger触发 跟的是事件名
        $("#demo").trigger("focus")
    })

    /**************04 onchange *******************************/
    $("#sl").change(function () {
        console.log($(this).val())
    })

    $("#file").change(function () {
        console.log("触发上传文件的change事件")
    })
    /**************05 onselect *******************************/
    $("#se").select(function () {
        // console.log($(this).val())
        alert("你选中了一些文本")
    })
</script>