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. OpenCASCADE解非线性方程组
			
    OpenCASCADE解非线性方程组 eryar@163.com Abstract. 在科学技术领域里常常提出求解非线性方程组的问题,例如,用非线性函数拟合实验数据问题.非线性网络问题.几何上的曲线曲 ...
    
			
    2. 
						
  2. 机器学习Python实现AdaBoost
			
    adaboost是boosting方法多个版本号中最流行的一个版本号,它是通过构建多个弱分类器.通过各个分类器的结果加权之后得到分类结果的.这里构建多个分类器的过程也是有讲究的,通过关注之前构建的分类 ...
    
			
    3. 
						
  3. js02---字符串
			
    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
    
			
    4. 
						
  4. modSecurity规则学习（三）——SecRule
			
    通用格式 SecRule VARIABLES OPERATOR [TRANSFORMATION_FUNCTIONS, ACTIONS]   阶段phase (1)request headers (2) ...
    
			
    5. 
						
  5. VS 格式化代码  Ctrl + K, Ctrl + F
			
    
			
    6. 
						
  6. Array与ArrayList
			
    代码图理解复杂代码 类图 1.抽象动物类Animal using System; using System.Collections.Generic; using System.Linq; using  ...
    
			
    7. 
						
  7. 平板电脑上完美体验Windows 8 (视频)
			
    平板电脑上完美体验Windows 8 (视频) 目前,计算机产业正面临重大变革,三网融合,云计算,物联网正加速终端产品的融合.4C融合成为终端产品的未来发展趋势,是4C融合的代表性产品,它破了传统的W ...
    
			
    8. 
						
  8. FZU 1921 栀子花开
			
    栀子花开 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: 19216 ...
    
			
    9. 
						
  9. ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件
			
    转自原文 ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件 当前系统的数据量越来越大的,昨天还运行正常的数据库,突然无法使用了.经过定位发现是"OR ...
    
			
    10. 
						
  10. Go语言核心之美 1.5－作用域
			
    变量的作用域是指程序代码中能够有效使用这个变量的范围. 不要将作用域和生命期混在一起. 作用域是代码中的一块区域,是一个编译期的属性:生命期是程序执行期间变量存活的时间段.在此时间段内,变量能够被程序 ...
    
			
    11.