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实现的3D旋转木马特效代码分享
Aug 25 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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将数据导入到Foxmail
2006/10/09 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php文件上传简单实现方法
2015/01/24 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python 调用有道api接口的方法
2019/01/03 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Python谱减法语音降噪实例
2019/12/18 Python
CSS3 边框效果
2019/11/04 HTML / CSS
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
英语道歉信范文
2014/01/09 职场文书
高中生期末评语大全
2014/01/28 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
法语专业求职信
2014/07/20 职场文书
个人事迹材料范文
2014/12/29 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
市场部岗位职责范本
2015/04/15 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Python pyecharts绘制条形图详解
2022/04/02 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android