事件模拟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. 通过adb方式给安卓手机截图的cmd批处理文件

    @echo off rem  通过adb方式截图rem  需要安装adb ,一般安装了android sdk 默认带了adb ,路径为sdk目录的android-sdk\platform-toolsr ...

  2. shell注释

    sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是一个自动打ipa的脚本,基于webfrogs ...

  3. Web性能优化：What? Why? How?

    为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据 ...

  4. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  5. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

  6. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  7. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  8. Linux基础介绍【第七篇】

    linux用户分类 超级用户:UID=0,root 普通用户:UID 500起,由超级用户或具有超级用户权限的用户创建的用户. 虚拟用户:UID 1-499,为了满足文件或服务启动的需要而存在,一般都 ...

  9. 基于select的python聊天室程序

    python网络编程具体参考<python select网络编程详细介绍>. 在python中,select函数是一个对底层操作系统的直接访问的接口.它用来监控sockets.files和 ...

  10. TCP三次握手图解