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 相关文章推荐
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
jquery实现上传图片功能
Jun 29 jQuery
JavaScript中window和document用法详解
Jul 28 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 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编程最快明白》第三讲:php数组
2010/11/01 PHP
php动态生成函数示例
2014/03/21 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
javascript demo 基本技巧
2009/12/18 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
JavaScript函数详解
2014/11/17 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
JavaScript中string对象
2015/06/12 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
快速了解python leveldb
2018/01/18 Python
Python3常用内置方法代码实例
2019/11/18 Python
pytorch中的inference使用实例
2020/02/20 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Python如何对XML 解析
2020/06/28 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
opencv实现图像平移效果
2021/03/24 Python
经典婚礼主持开场白
2014/03/13 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js