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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Why we need EJB
2016/10/20 面试题
工程造价自荐信
2013/10/09 职场文书
外贸业务员工作职责
2014/01/06 职场文书
个人债务授权委托书
2014/10/17 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
实习感想范文
2015/08/10 职场文书
python 中的jieba分词库
2021/11/23 Python