事件模拟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. JavaScript function函数种类

    本篇主要介绍普通函数.匿名函数.闭包函数 目录 1. 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 2. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. ...

  2. 【Win 10 应用开发】在App所在的进程中执行后台任务

    在以往版本中,后台任务都是以独立的专用进程来运行,因此,定义后台任务代码的类型都要位于 Windows 运行时组件项目中. 不过,在14393中,SDK 作了相应的扩展,不仅支持以前的独立进程中运行后 ...

  3. Unity 序列化 总结

    查找了 Script Serialization http://docs.unity3d.com/Manual/script-Serialization.html 自定义序列化及例子: http:// ...

  4. Photoshop将普通照片快速制作二次元漫画风格效果

    今天为大家分享Photoshop将普通照片快速制作二次元漫画风格效果,教程很不错,对于喜欢漫画的朋友可以参考本文,希望能对大家有所帮助! 一提到日本动画电影,大家第一印象肯定是宫崎骏,但是日本除了宫崎 ...

  5. [数据结构]——堆（Heap）、堆排序和TopK

    堆(heap),是一种特殊的数据结构.之所以特殊,因为堆的形象化是一个棵完全二叉树,并且满足任意节点始终不大于(或者不小于)左右子节点(有别于二叉搜索树Binary Search Tree).其中,前 ...

  6. Java程序：从命令行接收多个数字，求和并输出结果

    一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码:   //王荣荣 2016/9/23     ...

  7. 无法访问org.springframework.core.NestedRuntimeException 找不到org.springframework.core.NestedRuntimeException的类文件

    在学习springAOP时,出现如下异常: 无法访问org.springframework.core.NestedRuntimeException 找不到org.springframework.cor ...

  8. SAP CRM 树视图（TREE VIEW）

    树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view) ...

  9. Android中实现APP文本内容的分享发送与接收方法简述

    谨记(指定选择器Intent.createChooser()) 开始今天的内容前,先闲聊一下: (1)突然有一天头脑风暴,对很多问题有了新的看法和见解,迫不及待的想要分享给大家,文档已经写好了,我需要 ...

  10. kvm 使用入门详解

    kvm 是虚拟化技术的一个典型实现,功能非常强大,使用很方便.kvm 本身主要实现对 CPU 的虚拟化,内存和IO的虚拟化使用了开源软件 qemu,qemu 是纯软件层面的虚拟化,其实就是个模拟器.k ...