JQuery 事件触发的三种方式(trigger,triggerHandler)

最新推荐文章于 2024-03-26 18:30:14 发布

houyanhua1

最新推荐文章于 2024-03-26 18:30:14 发布

阅读量1.7k

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79615062

版权

JQuery 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的页面元素焦点事件案例。通过为输入框绑定焦点事件，当用户点击页面时，即使没有直接点击输入框也能触发焦点事件，使输入框获得焦点并弹出提示。这种方式有助于增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
//            $(document).on("click", function () {
//                alert("页面被点击了");
//            });

            //触发document的onclick事件(第一种方式)(触发浏览器默认行为)
//            $(document).click();

            //触发document的onclick事件(第二种方式)(触发浏览器默认行为)
//            $(document).trigger("click");

            //触发document的onclick事件(第三种方式)(不触发浏览器默认行为)(相当于阻止默认动作,只会执行事件绑定的函数，并不会触发事件)
//            $(document).triggerHandler("click");

            $("input").on("focus", function () {
                alert("我获取了焦点！");
            });

            //事件触发(不触发浏览器行为)(相当于:只会执行事件绑定的函数，并不会触发事件,并没有获取焦点)
            $(document).click(function () {
                $("input").triggerHandler("focus");
            });
        })
    </script>
</head>
<body>

<input type="text"/>


</body>
</html>