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、相关知识


  1. one()为每一个匹配元素的特定事件绑定一个一次性的事件处理函数。
    

    通过one()函数绑定的事件处理函数都是一次性的，只有首次触发事件时会执行该事件处理函数。触发之后，jQuery就会移除当前事件绑定。
    2. 

  2. 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方法如何使用的更多相关文章
	

    
								
  1. jquery中prop()方法和attr()方法
		
    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值.  ...
    
		
    2. 
						
  2. jquery中attr方法和prop方法的区别
		
    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...
    
		
    3. 
						
  3. jQuery中bind方法和live方法区别解析
		
    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
    
		
    4. 
						
  4. jquery中prop()方法和attr()方法的区别浅析
		
    官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop()这个新方法,不可能没用吧,那什么时候该用attr(),什么时候该用prop()呢 jquery1.6中新加了一个方法pr ...
    
		
    5. 
						
  5. jquery中prop()方法和attr()方法的区别
		
    最近在用jquery的时候遇到一个问题,那就是attr()方法,发现这个方法有时候使用会有一些说不出原因的问题.翻翻自己之前笔记发现,还有个函数prop(). 这两个函数都可以用来获取属性. jque ...
    
		
    6. 
						
  6. jquery中prop()方法和attr()方法的区别(转)
		
    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了pro ...
    
		
    7. 
						
  7. jQuery中hover方法和toggle方法使用指南
		
    jQuery提供一些方法(如:toggle)将两种事件效果合并到一起,比如:mouseover.mouseout:keyup.keydown等 1.hover函数 hover(over,out)一个模 ...
    
		
    8. 
						
  8. js进阶 11-4/5  jquery中css的类的操作有哪些
		
    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
    
		
    9. 
						
  9. js进阶课程 12-9 jquery的事件对象event的方法有哪些？
		
    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. dlmalloc 2.8.6 源代码具体解释(5)
			
    本文章由vector03原创, 转载请注明出处. 邮箱地址: mmzsmm@163.com, 欢迎来信讨论.     3. 分配及实现 本章节介绍dlmalloc的分配算法和实现.由于存在多mspac ...
    
			
    2. 
						
  2. 目标决定人生——没有目标就失去一切 （没有目标的奋斗是浪费青春，比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账）good
			
    没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...
    
			
    3. 
						
  3. 小项目: low版本的 员工信息程序:
			
    ### 附加两个文件1 user_info 和worker_info flag = False def logon(): #登录函数 global flag usr = input('Username ...
    
			
    4. 
						
  4. Android 实现QQ、微信、新浪微博和百度第三方登录
			
    前言: 对于大多数的APP都有第三方登录这个功能,自己也做过几次,最近又有一个新项目用到了第三方登录,所以特意总结了一下关于第三方登录的实现,并拿出来与大家一同分享: 各大开放平台注册账户获取AppK ...
    
			
    5. 
						
  5. JQ 实施编辑 （clone()复制行||双击编辑）
			
    //代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
    
			
    6. 
						
  6. OpenCV —— 写入AVI视频文件
			
    打开视频文件,对每一帧进行极坐标变换,然后将转换生成的图像序列写入视频文件中 #include "cv.h" #include "highgui.h" int  ...
    
			
    7. 
						
  7. HDU 6182 A Math
			
    A Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...
    
			
    8. 
						
  8. Android网络通信Volley框架源代码浅析（一）
			
    尊重原创http://blog.csdn.net/yuanzeyao/article/details/25837897 从今天開始,我打算为大家呈现关于Volley框架的源代码分析的文章,Volley ...
    
			
    9. 
						
  9. ubuntu下sudo命令不再输入密码
			
    ubuntu下普通用户是没有root权限,很多命令在使用时都需要使用命令sudo 'cmd',但系统需要user验证自己,即需要输入普通用户的密码.但普通用户是否有执行该cmd的权限,需要到系统文件/ ...
    
			
    10. 
						
  10. js19--继承终极版本
			
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
    
			
    11.