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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
详解原生js实现offset方法
Jun 15 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
SONY ICF-F10中波修复记
2021/03/02 无线电
Zend引擎的发展 [15]
2006/10/09 PHP
php文件上传的简单实例
2013/10/19 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
做网页的一些技巧
2007/02/01 Javascript
可以支持多中格式的JS键盘
2007/05/02 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
jquery编写日期选择器
2017/03/16 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
python实现教务管理系统
2018/03/12 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
项目专员岗位职责
2013/12/04 职场文书
餐饮加盟计划书
2014/01/10 职场文书
家长会学生演讲稿
2014/04/26 职场文书
一分钟演讲稿
2014/04/30 职场文书
行政监察建议书
2014/05/19 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
物理学专业自荐信
2014/06/11 职场文书
党校学习心得体会范文
2014/09/09 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
2014年信访工作总结
2014/11/17 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书