jQuery自动触发事件
转自:https://blog.csdn.net/CY_LH/article/details/78982218
常用模拟
有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。
在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。
1 |
$('#btn').trigger("click"); |
这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写click(),来达到同样的效果:
1 |
$('#btn').click(); |
触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件,JQuery代码如下:
1 |
$('#btn').bind("myClick", function(){ |
2 |
$('#test').append("<p>我的自定义事件.</p>"); |
3 |
}); |
想要触发这个事件,可以使用以下代码来实现:
1 |
$('#btn').trigger("myClick"); |
传递数据
trigger(type[,data])方法有两个参数,第1个参数是要触发的事件类型,第2个参数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
下面是一个传递数据的例子。
1 |
$(function(){ |
2 |
$('#btn').bind("myClick", function(event, message1, message2){ |
3 |
$('#test').append( "<p>"+message1 + message2 +"</p>"); |
4 |
}); |
5 |
$('#btn').click(function(){ |
6 |
$(this).trigger("myClick",["我的自定义","事件"]); |
7 |
}).trigger("myClick",["我的自定义","事件"]); |
8 |
}) |
执行默认操作
trigger()方法触发事件后,会执行浏览器默认操作。例如:
1 |
$("input").trigger("focus"); |
以上代码不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(这是浏览器的默认操作)。
如果只想触发绑定的focus事件,而不想执行浏览器默认操作,可以使用jQuery中另一个类似的方法——triggerHandler()方法。
1 |
$("input").triggerHandler("focus"); |
该方法会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作,即文本框只触发绑定的focus事件,不会得到焦点。
jQuery自动触发事件的更多相关文章
- jQuery 自动触发事件的坑
有时候项目需求页面加载完后,需要模拟用户操作,自动点击按钮.Jquery中可以使用trigger()方法模拟事件. $(selector).trigger(event,[param1,param2,. ...
- JQuery 自动触发事件
JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...
- jquery 自动触发事件 trigger
trigger() 栗子: 需求:我们在做二级联动的时候往往会遇到这样的需求,后台管理端页面加载完成后显示用户的省份,城市,并且可以对用户的省份,城市信息可以修改 如果只是简单的显示 你完全可以直接放 ...
- jquery自动触发click事件
$("").trigger("click"); //jquery的自动触发事件
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
- jquery trigger 触发事件小计 -- 关于a标签
jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...
- javascript和jquery 获取触发事件的元素
一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Gwt ListBox选中自动触发事件
以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...
随机推荐
- [数据处理] LabelEncoder编码
原创博文,转载请注明出处! # LabelEncoder介绍 LabelEncoder是对不连续的数字或文本编号. # LabelEncoder例子 # -*- coding: utf-8 ...
- 【集成学习】安装lightgbm
1.下载whl lightgbm的whl下载地址 2.输入命令 pip install lightgbm-2.0.3-py2.py3-one-win_am64.whl 3.验证是否成功 import ...
- Uoj 22 外星人
Uoj 22 外星人 注意到一个数只有 \(\%\) 了小于等于自己的数时,才可能有变化,否则可以随意安排,不会对最后最优解造成影响. 用 \(f[x]\) 表示给一个数 \(x\) ,仅用 \(a[ ...
- Codeforces 808G Anthem of Berland【KMP】【DP】
LINK 简要题意 给你一个串s,上面有字母和一些通配符,问你将通配符换成字母之后最多可以出现多少次串t 首先有一个很傻子的做法就是\(dp_{i,j}\)表示s到第i个位置匹配t串前j个字符的完整t ...
- BZOJ2431 HAOI2009 逆序对数列 【DP】*
BZOJ2431 HAOI2009 逆序对数列 Description 对于一个数列ai{a_i}ai,如果有i<j且ai>aja_i>a_jai>aj,那么我们称aia ...
- npm 可执行模块的开发&&私服发布
备注: 大家日常在使用npm 安装依赖的时候有一些是命令行工具,比如vue-cli,具体的开发比较简单,同时 可以基于此开发一些脚手架,方便开发. 1. 项目初始化 npm init 备注:按照 ...
- drill 数据源配置补充
1. mongodb { "type":"mongo", "connection":"mongodb://user:passwor ...
- phpstrom主题
http://phpstorm-themes.com/ 安装方法 JAR文件 导航->file->Import Settings->然后选择你刚才下载的JAR文件->点击确认- ...
- XaaS简介(关于IssS,PaaS以及SaaS)
IaaS,比较容易理解,提供了一个操作系统以及操作系统的硬件支撑:阿里云: PaaS,提供了一个平台,或者说,使用PaaS是希望能够在上面建立自己的服务/应用,同时平台会提供一些API或者工具,能够降 ...
- RK3288 手动设置电池电量
参考:[RK3288][Android6.0] 调试笔记 --- 电池电量一直显示100% 系统版本:RK3288 android 5.1 (与参考的变量和宏有点区别) 设备没有电池,在进行Fota升 ...