jQuery中trigger()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中trigger()方法用法。分享给大家供大家参考。具体分析如下:

此方法触发匹配元素指定类型的事件。

语法结构一:
规定匹配元素被触发的事件类型。

$(selector).trigger(event,param1,param2,...)

参数列表:

参数 描述
event 规定指定元素要触发的事件。 可以是自定义事件(使用 bind() 函数来附加),或者任何标准事件。
param 可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>trigger()函数-三水点靠木</title>

<style type="text/css">

div{

  width:200px;

  height:200px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("div").click(function(){

    $("div").append("添加的内容");

  });

  $("button").click(function(){

    $("div").trigger("click");

  })

})

</script>

</head>

<body>

  <div></div>

  <button>点击激活事件</button>

</body>

</html>

当点击button按钮可以的时候可以出发div上的click事件,进而执行click事件处理函数。

语法结构二:

以事件对象作为参数规定匹配元素要被触发的事件类型。

$(selector).trigger(eventObj)

参数列表:

参数 描述
eventObj 事件对象规定了事件发生时运行的函数。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>trigger()函数-三水点靠木</title>

<style type="text/css">

div{

  width:200px;

  height:200px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("div").click(function(){

    $("div").append("添加的内容");

  });

  var e=jQuery.Event("click");

  $("button").click(function(){

    $("div").trigger(e);

  })

})

</script>

</head>

<body>

  <div></div>

  <button>点击激活事件</button>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
jQuery的one()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 #Javascript
jQuery中bind()方法用法实例
Jan 19 #Javascript
jQuery中on()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之创建DOM元素
Jan 19 #Javascript
jQuery学习笔记之2个小技巧
Jan 19 #Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
目标责任书范文
2014/04/14 职场文书
维修工先进事迹
2014/05/29 职场文书
销售员岗位职责
2014/06/09 职场文书
新闻编辑求职信
2014/07/13 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
2015年组织部工作总结
2015/04/03 职场文书