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. crontab FAQ
			
    1.crontab变量问题 crontab中的脚本须要引入系统变量才干找到,否则crontab中的命令找不到系统变量,或者都写绝对路径. 2.1分钟运行一次 */1 * * * * /etc/keep ...
    
			
    2. 
						
  2. HTTP服务器状态码定义
			
    HTTP服务器状态代码定义 1.1 消息1xx(Informational 1xx) 该类状态代码用于表示临时回应.临时回应由状态行(Status-Line)及可选标题组成, 由空行终止.HTTP/1 ...
    
			
    3. 
						
  3. Property-属性动画
			
    今天第一次接触到属性动画.参考着 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38067475 的博客,自己学习下. 它的区别跟 ...
    
			
    4. 
						
  4. gridview-selector的设置
			
    其实它是跟listview相似的,如果你看下它跟listview的继承关系,就很容易理解了 public class GridView extends AbsListView { /** * Disa ...
    
			
    5. 
						
  5. 为什么会出现NoSQL数据库
			
    为什么会出现NoSQL数据库 一.总结 一句话总结:sql不支持分布式且且有性能瓶颈且不支持分布式,不同NoSQL适合不同的场景 1."不同的NoSQL数据库只适合不同的场景"这句 ...
    
			
    6. 
						
  6. Logstash整合Elasticsearch
			
    1:启动Elasticsearch2:bin/logstash -e 'input { stdin { } } output { elasticsearch { host => localhos ...
    
			
    7. 
						
  7. Day5上午解题报告
			
    预计分数:100+40+30=170 实际假分数:0+0+0=0 CE*3 实际真分数:60+50+0=110 老师没把我的程序放的文件夹里面,于是..... T1 https://www.luogu ...
    
			
    8. 
						
  8. go reflect 调用方法
			
    package main import ( "fmt" "reflect" ) type A struct { } func (A) Test() { fmt. ...
    
			
    9. 
						
  9. php学习笔记5
			
    PHP 常量 常量值被定义后,在脚本的其他任何地方都不能被改变. 一个常量由英文字母.下划线.和数字组成,但数字不能作为首字母出现. (常量名不需要加 $ 修饰符). 注意: 常量在整个脚本中都可以使 ...
    
			
    10. 
						
  10. HTTP浅谈
			
    HTTP浅谈 1···什么是HTTP? HTTP协议就是超文本传输协议(HyperText Transfer Protocol),通俗理解是浏览器和web服务器传输数据格式的协议,HTTP协议是一个应 ...
    
			
    11.