事件模拟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. C#学习资源

    # 视频 C#程序设计 Cousera(推荐) # 文档 C#教程 MSDN Microsoft API 和参考目录

  2. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  3. 阿里云学生优惠Windows Server 2012 R2安装IIS，ftp等组件，绑定服务器域名，域名解析到服务器，域名备案，以及安装期间错误的解决方案

     前言: 这几天终于还是按耐不住买了一个月阿里云的学生优惠.只要是学生,在学信网上注册过,并且支付宝实名认证,就可以用9块9的价格买阿里云的云服务ECS.确实是相当的优惠. 我买的是Windows S ...

  4. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  5. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  6. JAVA FreeMarker工具类

    FreeMarkerUtil.java package pers.kangxu.datautils.utils; import java.io.File; import java.io.StringW ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. XAMARIN ANDROID 二维码扫描示例

    现在二维码的应用越来越普及,二维码扫描也成为手机应用程序的必备功能了.本文将基于 Xamarin.Android 平台使用 ZXing.Net.Mobile  做一个简单的 Android 条码扫描示 ...

  9. NYOJ 954

    首先观察: 2! = 2×1                 = (2)10     = (10)2,        则第一个1是第2位,2!有1个质因数23! = 3×2×1             ...

  10. Xamarin.Android下获取与解析JSON

    一.新建项目 1.新建一个Android项目,并命名为为NetJsonList 2.右击引用,选择添加引用,引用System.Json.dll 二.同步请求 既然是跨平台,我们自然不能按照java下的 ...