jquery 模拟事件触发的一些总结

最新推荐文章于 2021-10-18 19:38:19 发布
最新推荐文章于 2021-10-18 19:38:19 发布
阅读量455 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lsmxx/article/details/103481823
版权

元素的大部分事件都是用户触发执行的，比如click事件，mousemove事件，等等

当然，可以通过代码来模拟用户的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $('#btn1').click(function () {
                alert('click first button')
            })

            $('#btn2').click(function () {
                $('#btn1').trigger('click')
            })
        })
    </script>
</head>
<body>
<button id="btn1">click me</button>
<button id="btn2">模拟点击第一个按钮</button>
</body>
</html>

trigger() 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。

triggerHandler()方法同样也能触发被选元素上指定的事件

但是二者也有区别

区别1 .trigger()会操作jQuery对象匹配的所有元素，而triggerHandler()只会影响匹配到的第一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            // 给按钮绑定click事件处理函数
            $("input[type=button]").click(function(event){
                alert($(this).val());
            });

            // 选中的button集合中,触发所有button的click,打印出button1,button2,button3
            $("input[type=button]").trigger("click");
        })
    </script>
</head>
<body>
<input type="button" id="1" value="button1">
<input type="button" id="2" value="button2">
<input type="button" id="3" value="button3">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            // 给按钮绑定click事件处理函数
            $("input[type=button]").click(function(event){
                alert($(this).val());
            });
            
            // 选中的button集合中,只触发第一个button的click事件,只打印出button1
            $("input[type=button]").triggerHandler("click");
        })
    </script>
</head>
<body>
<input type="button" id="1" value="button1">
<input type="button" id="2" value="button2">
<input type="button" id="3" value="button3">
</body>
</html>

区别2：由triggerHandler()创建的事件不会在DOM树种冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery.min.js"></script>
    <style>
        #outA {
            width: 400px;
            height: 400px;
            border: solid 1px #CDC9C9;
            position: relative
        }

        #outB {
            width: 200px;
            height: 200px;
            border: solid 1px #0000ff;
            top: 50px;
            left: 50px;
            position: absolute;
        }

        #outC {
            width: 100px;
            height: 100px;
            border: solid 1px #FFB90F;
            top: 50px;
            left: 50px;
            position: absolute;
        }
    </style>
    <script>
        $(function () {
            $("#outA").click(function () {
                alert("A");
            });
            $("#outB").click(function () {
                alert("B");
            });
            $("#outC").click(function () {
                alert("C");
            });
            
            // 使用trigger,依次C、B、A
            $("#outC").trigger("click");


        });
    </script>
</head>
<body>
<div id="outA">A
    <div id="outB">B
        <div id="outC">C</div>
    </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery.min.js"></script>
    <style>
        #outA {
            width: 400px;
            height: 400px;
            border: solid 1px #CDC9C9;
            position: relative
        }

        #outB {
            width: 200px;
            height: 200px;
            border: solid 1px #0000ff;
            top: 50px;
            left: 50px;
            position: absolute;
        }

        #outC {
            width: 100px;
            height: 100px;
            border: solid 1px #FFB90F;
            top: 50px;
            left: 50px;
            position: absolute;
        }
    </style>
    <script>
        $(function () {
            $("#outA").click(function () {
                alert("A");
            });
            $("#outB").click(function () {
                alert("B");
            });
            $("#outC").click(function () {
                alert("C");
            });

            // 使用trigger,只会打印出C
            $("#outC").triggerHandler("click");

        });
    </script>
</head>
<body>
<div id="outA">A
    <div id="outB">B
        <div id="outC">C</div>
    </div>
</div>
</body>
</html>

区别三：trigger会触发事件的默认行为，而triggerHandler则不会（如表单提交）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script>
        function myvalid()
        {
            var name = $('#name').val()
            if (name== '' || name == null) {
                alert('用户名不能为空')
                $('#name').focus()
                // return false
            }

        }

        $(function () {
            $('#form1').trigger('submit')
            // $('#form1').triggerHandler('submit')
        })
    </script>
</head>
<body>
<form id="form1" action="1.php" method="post" onsubmit="return myvalid()">
    <div>
        <label for="name">用户名</label>
        <input type="text" name="name" id="name">
    </div>
    <input type="submit" value="submit">
</form>
</body>
</html>

 

李 书 明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery模拟触发
walle的博客
06-03 679
$('#id').trigger('click'); $('#id').trigger('click');
jQuery模拟事件操作
Ward_Tian的博客
10-24 448
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;模拟事件操作&lt;/title&gt; &lt;script src="../js/jquery-3.3.1.js"&gt;&lt;/script&gt; &am
JQuery 自动触发事件
sjsm2007的专栏
02-20 2036
常用模拟 有时候，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。 在JQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。 1 $('#btn').trigger("click"); 这样，
关于jquery的click()和trigger(‘click‘)方法的一点问题
SailorCai的技术博客
06-20 1万+
在原生js中如果要模拟事件其实比较麻烦的事情，因为要考虑到各个浏览器对dom标准的兼容，同时还要进行多个步骤（创建event对象、初始化、正式触发等步骤）。不过jquery就有一个非常简单好用的click()或者trigger('click')方法来模拟点击事件这两个方法可以说是非常简单好用了。但是这里我其实要说的是这个方法的一点问题。问题出现的场景是：当某个元素的点击事件...
jQuery 2
zhuxyyds的博客
10-18 493
常用的 jQuery 事件方法 $(document).ready(function)文档完全加载完后执行函数 click(function) 方法是当按钮点击事件被触发时会调用一个函数 dblclick(function)双击元素时，会发生 dblclick 事件。 mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。 mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。 hover(function.
JQuery自动触发事件的方法
10-24
主要介绍了JQuery自动触发事件的方法,涉及trigger()方法完成模拟操作的相关技巧,需要的朋友可以参考下
jquery阻止冒泡事件使用模拟事件
10-26
当点击span的时候div和body的事件全部触发了。要阻止这种发生并使用模拟事件。具体实现如下，感兴趣的朋友可以参考下
使用jquery模拟a标签的click事件无法实现跳转的解决
01-19
最近在使用jquery模拟a标签的click事件，无法触发其默认行为。即click()或trigger('click')无法触发href跳转。 去卡咪官网 $('#aBtn').click();//无法跳转，不生效 $('$aBtn').trigger('click');//同样无法跳转，...
jQuery参考手册-事件总结
12-23
以下是对jQuery事件方法的详细总结： 1. **bind()**: `bind()` 方法允许你为一个或多个事件（如`click`、`change`等）绑定一个处理函数。当你触发这些事件时，该函数会被执行。例如： ```javascript $("button")....
在jQuery中，a标签trigger触发click不起作用的原因和解决方法
_Xiaoning_
09-06 4491
最近在项目中发现，用jq的trigger无法触发a标签的click事件。我的代码如下： $('a').trigger('click') 查阅资料发现： jquery trigger把(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem )的事件过滤掉...
JQuery的click,trigger触发a标签的click事件无效的问题分析
weixin_30337157的博客
01-24 723
今天在做一个手机端webAPP链接下载的时候，给a标签一个下载链接，但是通过 <a id="downFile" download="" href="" style="display:none;"></a> //方式一、使用Jquery触发点击事件不起作用，如下 $("#downFile").click(); $("#downFile").trigger("cli...
jquery中使用trigger()方法模拟事件
热门推荐
lijunling2008live的专栏
04-13 3万+
使用trigger()方法模拟事件 有时，需要通过模拟用户操作，来达到单击效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。 1.常用模拟 在jQuery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn按钮的click事件。 $("#btn").trigger("click"); 这样，当页面加载完毕后，
jQuery 中trigger()方法使用 -- 复制元素点击事件
grootbaby
11-23 939
1. 常用事件 在页面加载完成时  自动触发input的点击事件，在移动端可以实现自动弹出输入法，获得焦点 $("input").trigger("click").focus(); 简写为以下： $("input").click(); 2. 自定义事件 $("#btn").on("myClick",function(){ alert("自定义事件"); }); $(
on('click')与.click()事件的区别
hesterrocks的博客
03-21 2万+
$（selector）.on('click',function(){ });支持动态绑定元素，即页面上元素有添加或变化后仍可绑定,前提是selector须是目标绑定元素的父元素，如绑定body里的动态li元素：$('body).on('click','ul li',function(){});若直接绑定动态的li元素将不成功，效果与$('').click()相同。 $('').click()
.click()与on('click',function())
zhouzy539的博客
10-17 3万+
之前遇到过一次.click()无效，改成on绑定click就好了的情况，看了几篇博客后，发现是自己对click()和on的理解不够，没太在意，最近又遇到了，所以写下这篇博客加深印象。 $(选择器).click(fn)：当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而.J_del这个删除按钮是通过append加到页面上的 。所以.click()无效 .$(documen...
$('div').click()事件不能用
yan263364的博客
09-20 1万+
一、问题：click点击事件没有效果$('div#div1').click(function(){ // code... })二、原因原本div的id为div，用js动态把id改变了，click不能用 以为只有动态生成的dom元素才有click问题，刚开始没考虑这方面。把代码重新理了一遍，没有其他问题，最后想到，可能动态改变元素的id，click事件也不支持 三、解决$(document.b
关于Jquery trigger('click')失效的解决办法
hu小小
07-11 1万+
使用Jquery 的trigger方法失效trigger('click')对a标签会失效，解决办法是将a转换为js对象$('a')[0].click();
ajax 或 $("#search").click(function(){})请求后页面自动刷新
weixin_41796611的博客
11-09 2679
不知道小伙伴们有没有出现过同样的问题 使用 ajax 或者 $("#search").click(function(){}) 进行条件查询操作，查询出结果后会一闪而逝查询出的东西，然后页面刷新…… 这个是因为在你们显示内容的那个页面写了 &lt;from&gt;&lt;/form&gt; 表单 ,form表单会自动刷新，所以查询的东西还没有显示出来就刷掉了 小伙伴们可以再 页面ajax之后 ...
JQuery中区分模拟点击事件和用户点击事件
夜惊心的博客
09-24 4273
使用JQuery，我们可以自定义了事件函数，如 $("#foo").click(function(e){ //do work });     我们还可以模拟点击等事件的发生，如 $("#foo").click()     有的时候我们需要区分这种模拟事件和真正的用户事件。 方法一：     我们可以通过传递的参数e来判断是否是真正的用户点击，如果是用户点击事件，对象e将有c
jquery 触发text 失去焦点事件
最新发布
06-01
// 模拟触发文本框的失去焦点事件 $("#myText").blur(); ``` 在上面的代码中，我们首先使用 `$()` 方法获取 ID 为 `myText` 的文本框，然后使用 `.blur()` 方法为它绑定了一个失去焦点事件。当用户在文本框中输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李 书 明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值