事件模拟trigger

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

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

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

 <!DOCTYPE html>

 <html>

 <head>

 <title>simulate-trigger</title>

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

 <script type="text/javascript">

     $(function(){

         var $container=$('#T-container');

         $container.find('.T-search').on('click',function(){

             function getVal($tab,name){//获取控件值,$tab对象,name控件名称

                 return $tab.find("[name="+name+"]").val();

             }

             var $that=$(this),

                 $searchArea=$that.closest('.T-search-area'),

                 name = getVal($searchArea,"name"),

                 touristName = getVal($searchArea,"touristName");

             $searchArea.append("<p>"+ name +"-"+ touristName +"</p>");

         });

         //模拟click事件

         $container.find('.T-search').trigger('click');

     })

 </script>

 </head>

 <body>

 <div id="T-container">

     <div class="T-search-area">

         <label>线路产品</label>

         <input type="text" name="name" value="九寨沟黄龙溪三日游"/>

         <label>游客</label>

         <input type="text" name="touristName" value="HelloKitty"/>

         <input type="button" value="搜索" class="T-search" />

     </div>

 </div>

 </body>

 </html>

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

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

 <a href="http://www.cnblogs.com/zjf-1992/" id="myBlog">My Blog</a>

 <script type="text/javascript">

     $(function(){

         var $myBlog = $("#myBlog"),

               text = $myBlog.text();

          $myBlog.html('<span class="myBlogChild">'+ text +'</span>');

                 $myBlog.on("click", '.myBlogChild', function(event){

                     console.log("init.....");

                 })

         //trigger

         $myBlog.find(".myBlogChild").trigger("click");

     });

 </script>

trigger事件模拟的更多相关文章

  1. 深入理解DOM事件机制系列第四篇——事件模拟

    × 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...

  2. 浅谈Javascript事件模拟

    事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的.这就意 ...

  3. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

  4. U3D Trigger事件触发

    使用Trigger事件触发,可以达到虽然触发了,可是不改变任何效果. 这个是进入时候触发的: void OnTriggerEnter2D(Collider2D other) { print (othe ...

  5. 浅谈JavaScript的事件（事件模拟）

    事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件.通过JavaScript触发事件,也称为事件的模拟. DOM中事件模拟 可以document的createEvent ...

  6. Javascript高级编程学习笔记（72）—— 模拟事件（2）IE事件模拟

    IE中的事件模拟 低版本的IE浏览器作为前端开发的一股清流,想避过都不行 虽然低版本IE正在逐步被市场淘汰,不得不承认IE8以下的浏览器依然占了不小的份额 所以这里大概介绍IE8以下的低版本IE中的事 ...

  7. Javascript高级编程学习笔记（71）—— 模拟事件（1）DOM事件模拟

    事件,指的是网页中某个特定的交互时刻 一般来说事件由浏览器厂商负责提供,一般由用户操作或者其它浏览器功能来触发 但是有一类特殊的事件,那就是由我们开发人员通过JS触发的事件 这些事件和浏览器创建的事件 ...

  8. selenium:2.selenium 键盘事件模拟

    今晚不想加班,于是赶紧回来看看书,不知道今天怎么就突然特别想玩文明五,但是又要克制自己咯,所以还是看看书吧,干的事情有: 1.下了selenium的小工具:FireBug/FirePath. 2.确定 ...

  9. JavaScript事件模拟元素拖动

    一.前言: 最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等 ...

随机推荐

  1. 【AR实验室】ARToolKit之Example篇

    0x00 - 前言 PS : 我突然意识到ARToolKit本质可能就是一个可以实时求解相机内外参的解决方案. 拿到一个新的SDK,90%的人应该都会先跑一下Example.拿到ARToolKit的S ...

  2. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  3. 背后的故事之 - 快乐的Lambda表达式（一）

    快乐的Lambda表达式(二) 自从Lambda随.NET Framework3.5出现在.NET开发者眼前以来,它已经给我们带来了太多的欣喜.它优雅,对开发者更友好,能提高开发效率,天啊!它还有可能 ...

  4. 移动先行之谁主沉浮？ 带着你的Net飞奔吧！

    移动系源码:https://github.com/dunitian/Windows10 移动系文档:https://github.com/dunitian/LoTDotNet/tree/master/ ...

  5. 客户端的验证插件validator

    简单,智能,令人愉悦的表单验证~~~ 官方文档:http://www.niceue.com/validator/ <!DOCTYPE html> <html> <head ...

  6. 分布式系列文章——从ACID到CAP/BASE

    事务 事务的定义: 事务(Transaction)是由一系列对系统中数据进行访问与更新的操作所组成的一个程序执行逻辑单元(Unit),狭义上的事务特指数据库事务. 事务的作用: 当多个应用程序并发访问 ...

  7. Oracle碎碎念~1

    1. 设置SQL*Plus提示符 SQL> set sqlprompt "_user'@'_connect_identifier>" SYS@orcl> 为了对所 ...

  8. 如何在ASP.Net创建各种3D图表

    我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...

  9. php批量删除

    php批量删除可以实现多条或者全部数据一起删除 新建php文件 显示数据库中内容: <table width="100%" border="1" cell ...

  10. 电信计费业务：预后融合OCS到底应该实扣还是虚扣?

    引入OCS的初衷之一是为了让计费系统能够参与到用户的通讯控制中来,也就是所谓的实时信控.用户在没有余额时,通讯就会被停止,不会造成"天价欠费 ",一方面保障用户的利益,一方面也保障 ...