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 相关文章推荐
Js切换功能的简单方法
Nov 23 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
深入理解js promise chain
May 05 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 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&amp;MYSQL留言板源码
2020/07/19 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php实现学生管理系统
2020/03/21 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
js获取ip和地区
2017/03/10 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue实现计算器功能
2020/02/22 Javascript
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
浅析python的优势和不足之处
2018/11/20 Python
Python中按键来获取指定的值
2019/03/02 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python如何将模块打包并发布
2020/08/30 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
洗煤厂厂长岗位职责
2014/01/03 职场文书
公司办公室岗位职责
2014/03/19 职场文书
文明村创建实施方案
2014/03/27 职场文书
员工教育培训协议书
2014/09/27 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
python_tkinter事件类型详情
2022/03/20 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL