Top

trigger事件模拟用户行为

事件模拟trigger

在操作DOM元素中，大多数事件都是用户必须操作才会触发事件，但有时候，需要模拟用户的操作，来实现一些需求.

需求：页面初始化时触发搜索事件并获取input控件值，并打印输出（效果图如下）

<注：class、id按规则，绑定事件DOM元素均以"T-*"开头>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>simulate-trigger</title>
 5 <script src="../../scripts/jquery.js" type="text/javascript"></script>
 6 <script type="text/javascript">
 7     $(function(){
 8         var $container=$('#T-container');
 9         $container.find('.T-search').on('click',function(){
10             function getVal($tab,name){//获取控件值,$tab对象,name控件名称
11                 return $tab.find("[name="+name+"]").val();
12             }
13             var $that=$(this),
14                 $searchArea=$that.closest('.T-search-area'),
15                 name = getVal($searchArea,"name"),
16                 touristName = getVal($searchArea,"touristName");
17             $searchArea.append("<p>"+ name +"-"+ touristName +"</p>");
18         });
19         //模拟click事件
20         $container.find('.T-search').trigger('click');
21     })
22 </script>
23 </head>
24 <body>
25 <div id="T-container">
26     <div class="T-search-area">
27         <label>线路产品</label>
28         <input type="text" name="name" value="九寨沟黄龙溪三日游"/>
29         <label>游客</label>
30         <input type="text" name="touristName" value="HelloKitty"/>
31         <input type="button" value="搜索" class="T-search" />
32     </div>
33 </div>
34 </body>
35 </html>

新添加于 2017-05-21 14:05:32  trigger虽模拟用户行为，但当被操作的元素是超链接标签a时；不会触发href页面跳转行为；

解决方法是超链接标签a添加子级标签；为子级标签绑定trigger事件；就可以触发a标签href行为了

 1 <a href="http://www.cnblogs.com/zjf-1992/" id="myBlog">My Blog</a>
 2 <script type="text/javascript">
 3     $(function(){
 4         var $myBlog = $("#myBlog"),
 5               text = $myBlog.text();
 6          $myBlog.html('<span class="myBlogChild">'+ text +'</span>');
 7                 $myBlog.on("click", '.myBlogChild', function(event){
 8                     console.log("init.....");
 9                 })
10         //trigger
11         $myBlog.find(".myBlogChild").trigger("click");
12     });
13 </script>
posted @ 2016-04-16 19:33  Avenstar  阅读(497)  评论(0)    收藏  举报