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
Feb 25 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
简单的js计算器实现
Oct 26 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
javascript canvas时钟模拟器
Jul 13 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
一个选择最快的服务器转向代码
2009/04/27 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
小程序实现留言板
2018/11/02 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
python编程实现归并排序
2017/04/14 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python中断多重循环的思路总结
2019/10/04 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python如何删除文件、目录
2020/06/23 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
新东网科技Java笔试题
2012/07/13 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
母亲节寄语大全
2015/02/27 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL