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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
详解Webpack4多页应用打包方案
Jul 16 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+javascript模拟Matrix画面
2006/10/09 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Puppeteer使用示例详解
2019/06/20 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python匿名函数用法实例分析
2019/08/03 Python
python基础 range的用法解析
2019/08/23 Python
Python 元组操作总结
2019/09/18 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
数据员岗位职责
2013/11/19 职场文书
毕业生自荐信格式
2014/03/07 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
作文批改评语
2014/12/25 职场文书
2015年老干部工作总结
2015/04/23 职场文书
校园开放日新闻稿
2015/07/17 职场文书
八年级英语教学反思
2016/02/15 职场文书