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. 《SAS编程与数据挖掘商业案例》学习笔记之十六
			
    <SAS编程与数据挖掘商业案例>学习笔记,本次重点:sas宏变量 内容包含:宏变量.宏函数.宏參数.通配函数.字符函数.计算函数.引用函数.宏语句.宏应用 1.宏触发器: %name-to ...
    
			
    2. 
						
  2. jquery源码10-提交的数据和ajax()
			
    { var r20 = /%20/g, //全部空格 rbracket = /\[\]$/, //结尾位置匹配中括号 rCRLF = /\r?\n/g, rsubmitterTypes = /^(?: ...
    
			
    3. 
						
  3. 2.CURL命令
			
    转自:https://blog.csdn.net/ligang2585116/article/details/46548617 curl是一种命令行工具,作用是发出网络请求,然后得到和提取数据,显示在 ...
    
			
    4. 
						
  4. Day1下午解题报告
			
    预计分数:0+30+30=60 实际分数:0+30+40=70 T1水题(water) 贪心,按长度排序, 对于第一幅牌里面的,在第二个里面,找一个长度小于,高度最接近的牌 进行覆盖. 考场上的我离正 ...
    
			
    5. 
						
  5. mvc4 视图中的form如何获取
			
    public ActionResult Index(FormCollection form)         {             var Name = form["字段名" ...
    
			
    6. 
						
  6. centos配置tomcat编辑修改
			
    https://jingyan.baidu.com/article/6525d4b1382f0aac7d2e9421.html
    
			
    7. 
						
  7. iframe自适应高度解决方法 .
			
    <div id="leftBar"> <iframe name="tag" src="_iframe.html" styl ...
    
			
    8. 
						
  8. ZOJ 3524 Crazy Shopping
			
    Crazy Shopping Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ...
    
			
    9. 
						
  9. Linux下设置ip和主机名进行绑定
			
    1:输入命令gedit   /etc/hosts 这样你就打开了一个文本,然后在文本的末尾进行加入例如以下: ip地址                主机名 192.168.0.125       h ...
    
			
    10. 
						
  10. 3/21 Django框架 模板路径及模板过滤器  1.模板路径查找
			
    3/21 Django框架 模板路径及模板过滤器 1.模板路径查找 先找settings.py里的TEMPLATES列表下的DIRS路径.如果APP_DIRS为True,还会到注册了的APP文件夹下依 ...
    
			
    11.