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. Bmob移动后端云服务平台--Android从零開始--(一)何为Bmob
			
    Bmob移动后端云服务平台--Android从零開始--(一)何为Bmob 在正式的项目开发中,单client不能满足我们的需求,须要实现client与服务端的连接. 而在编写Android服务端代码 ...
    
			
    2. 
						
  2. js插件---layer.js使用体验是怎样
			
    js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...
    
			
    3. 
						
  3. linux的vi或vim文件时，怎样消除刚才查找字符串的高亮？
			
    有时候,自己在通过/查找字符串时,会出现: 但是呢,当你保存,再次进入还是会出现这么花的高亮显示,很令人苦恼. 解决办法 随便,输入没有的字符串,即可解决. 如下 /sssssssssssssssss ...
    
			
    4. 
						
  4. Index was out of range
			
    Index was out of range. Must be non-negative and less than the size of the collection. Parameter nam ...
    
			
    5. 
						
  5. spring webSocket The HTTP response from the server [200] did not permit the HTTP upgrade to WebSocket
			
    在springboot 1.5.9版本 WebSocketConfig配置 registry.addEndpoint("/webSocket").withSockJS();在加了. ...
    
			
    6. 
						
  6. 18/9/21模拟赛-Updated
			
    18/9/21模拟赛 期望得分:100:实际得分:0  qwq 拿到题目第一眼,我去,这不是洛谷原题(仓鼠找Sugar)吗 又多看了几眼,嗯,对,除了是有多组数据外,就是原题 然后码码码....自以为 ...
    
			
    7. 
						
  7. git -处理分支合并
			
    1.分支间的合并 1)直接合并:把两个分支上的历史轨迹合二为一(就是所以修改都全部合并) zhangshuli@zhangshuli-MS-:~/myGit$ vim merge.txt zhangs ...
    
			
    8. 
						
  8. actionBarTab-actionBarTab自定义 布局没法改变其中字体相对中间的位置
			
    我们经常遇到对actionBarTab 进行操作的情况.现在记录修改它的样式的方法,已经如何自定义tab的显示布局 1.在你的theme主题中添加<item name="android ...
    
			
    9. 
						
  9. C#异步编程的实现方式（4）——Task任务
			
    最基本的是知道怎么启动一个Task. 1.Task类构造函数 使用Task类的构造函数.实例化Task对象时,任务不会立即运行,而是指定Created状态.接着调用Task类的Start()方法来启动 ...
    
			
    10. 
						
  10. BZOJ4864: [BeiJing 2017 Wc]神秘物质(Splay)
			
    Description 21ZZ 年,冬. 小诚退休以后, 不知为何重新燃起了对物理学的兴趣. 他从研究所借了些实验仪器,整天研究各种微观粒子.这 一天, 小诚刚从研究所得到了一块奇异的陨石样本, 便 ...
    
			
    11.