js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用
一、总结
一句话总结：
1、one()方法和on()方法的区别是什么？
除了one()只执行一次，其它和on()一模一样，包括事件委托了额外参数等
22 //one()函数绑定的事件处理函数都是一次性的
23 $('#btn1').one('click',function(){
24 //alert('one')
25 $('<div></div>').appendTo($('body'))
26 })
27
28 $('#btn1').one('click',100,function(e){
29 alert(e.data)
30 })
31
32 $(document).one('click','#btn1',100,function(e){
33 alert(e.data)
34 })
2、触发事件是什么意思？
比如你给btn添加一个click事件，你点击的话这个click就执行
如果用trigger的话，你不点击这个事件也执行，相当于trigger给你点击了
并且如果你绑定的是一个自定义事件，除了trigger，你没有办法触发
36 $('#btn1').click(function(){
37 alert('trigger')
38 })
39 //使用trigger触发
40 $('#btn1').trigger('click')
3、trigger触发事件如何使用（监听对象和参数是谁）？
监听对象是要触发事件的对象，参数是事件的类型，用脚指头想就知道应该是这样，因为触发事件就是需要这两个参数，而选择器一般选择的就是监听对象
39 //使用trigger触发
40 $('#btn1').trigger('click')
4、trigger的两种简写方式什么？
链式操作和直接事件名
42 //简写方法1
43 $('#btn1').on('click',function(){
44 alert('trigger')
45 }).trigger('click')
46
47 //简写方法2
48 $('#btn1').on('click',function(){
49 alert('trigger')
50 }).click()
5、trigger的必须使用场景是什么？
绑定自定义事件要触发必须用trigger
52 //自定义事件
53 $(document).on('myEvent',function(){
54 alert('Game Over!')
55 }).trigger('myEvent')
二、jquery中one方法和trigger方法如何使用
1、相关知识
- one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
- trigger() 在每一个匹配的元素上触发某类事件。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<div id="div1"></div>
<script type="text/javascript">
$(function(){
/*
//one()函数绑定的事件处理函数都是一次性的
$('#btn1').one('click',function(){
//alert('one')
$('<div></div>').appendTo($('body'))
}) $('#btn1').one('click',100,function(e){
alert(e.data)
}) $(document).one('click','#btn1',100,function(e){
alert(e.data)
}) $('#btn1').click(function(){
alert('trigger')
})
//使用trigger触发
$('#btn1').trigger('click') //简写方法1
$('#btn1').on('click',function(){
alert('trigger')
}).trigger('click') //简写方法2
$('#btn1').on('click',function(){
alert('trigger')
}).click()
*/
//自定义事件
$(document).on('myEvent',function(){
alert('Game Over!')
}).trigger('myEvent')
})
</script>
</body>
</html>
js进阶 12-13 jquery中one方法和trigger方法如何使用的更多相关文章
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- jquery中attr方法和prop方法的区别
关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jquery中prop()方法和attr()方法的区别浅析
官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢 jquery1.6中新加了一个方法pr ...
- jquery中prop()方法和attr()方法的区别
最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...
- jquery中prop()方法和attr()方法的区别(转)
jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了pro ...
- jQuery中hover方法和toggle方法使用指南
jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
随机推荐
- RvmTranslator6.0 - AVEVA Marine Hull Model
eryar@163.com 1. Introduction RvmTranslator can translate the RVM file exported by AVEVA Plant(PDMS) ...
- vue 打包成 apk 文件（修改路径）
第一个坑:文件引用路径 现在项目我们什么都没动,是初始化之后直接打包的状态,打开dist/index.htmnl文件整个网页都是一片空白的. 爬坑: 打开 config文件夹/index.js文件 a ...
- Fedora Core 11 Alpha试用视频（由于youtube问题暂时无法访问）
1.系统安装: http://www.youtube.com/watch?v=QcDy5eRQZ20 2.重启后配置 3.体验Fedora 11 Gnome2.25和Kde 4.2 http: ...
- 分享js寄生组合模式继承
function person(){ this.name = 'taobao'; this.showMess = function(){ return this.name; } } person.pr ...
- oracle跨数据库跨用户訪问注意事项
java代码中不同意出现oracle的username.数据链路名. 跨用户.跨数据库的訪问必须在oracle中建同义词或视图来实现.在java代码中仅仅需当做当前用户下的对象处理.
- home.pl 正在促销，一些域名免费（终止于2017.4.4）
home.pl 正在促销,一些域名免费(终止于2017.4.4) home.pl 成立于1997年,是波兰顶尖的互联网服务公司.专注于域名登记,托管网站,保持电子邮件帐户等. home.pl 正在促 ...
- spring的BeanWrapper类的原理和使用方法
转自:http://blog.sina.com.cn/s/blog_79ae79b30100t4hh.html 如果动态设置一个对象属性,可以借助Java的Reflection机制完成: Class ...
- 47.__if_not_exists语句
#include <iostream> using namespace std; template<class T> class myclass { public: T t; ...
- 带你一分钟理解闭包--js面向对象编程(转载他人)
什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); ...
- 相对路径 System.Web HttpServerUtilityBase Server.MapPath("~/")
相对路径 System.Web HttpServerUtilityBase Server.MapPath("~/")