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 相关文章推荐
arguments对象
Nov 20 Javascript
List Installed Software Features
Jun 11 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
详细聊聊vue中组件的props属性
Nov 02 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记录代码执行时间(实现代码)
2013/07/05 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
初学Python实用技巧两则
2014/08/29 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python实现公司年会抽奖程序
2019/01/22 Python
python变量的存储原理详解
2019/07/10 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
企业节能减排实施方案
2014/03/19 职场文书
个人先进事迹材料
2014/12/29 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年女职工工作总结
2015/05/15 职场文书
初中家长意见
2015/06/03 职场文书
《角的度量》教学反思
2016/02/18 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
golang实现浏览器导出excel文件功能
2022/03/25 Golang