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入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
JavaScript 接口原理与用法实例详解
May 12 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
javascript 全等号运算符使用说明
2010/05/31 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
JavaScript 数组详解
2013/10/10 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
在django中使用自定义标签实现分页功能
2017/07/04 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python 实现按对象传值
2019/12/26 Python
详解pandas映射与数据转换
2021/01/22 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
演讲稿开场白
2014/01/13 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
交通事故协议书范本
2016/03/19 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
springboot读取resources下文件的方式详解
2022/06/21 Java/Android