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 相关文章推荐
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
HTML上传控件取消选择
Mar 06 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
js+html5实现侧滑页面效果
Jul 15 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 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 获取select下拉列表框的值
2010/05/08 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python七种方法判断字符串是否包含子串
2020/08/18 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
2013年入党人员的自我鉴定
2013/10/25 职场文书
车工岗位职责
2013/11/26 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python