js进阶 12-14 jquery的事件触发函数是哪两个

一、总结

一句话总结：trigger和triggerHandler

1、trigger传额外参数时候的注意事项是什么？

注意样例中是三个参数

1、传的参数写在trigger的第二个参数
2、如果要传多个参数，用数组方式

31      //trigger的额外数据

32      //多条数据时候需要放到[]中

33       $('#btn1').on('click',

34           300,function(e,data1,data2){

35           alert('trigger: '+data1+','+data2+','+e.data)

36       }).trigger('click',[100,200])

2、trigger和triggerHandler的区别是什么？

a、triggerHandler()不会引起事件的默认行为

例如form的跳转事件

43        //区别1:triggerHandler()不会引起事件默认行为

44       // $('#myform').trigger('submit')

45       $('#myform').triggerHandler('submit')

b、trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。

比如$('div')的时候

47       //区别2：triggerHandler() 只影响第一个匹配元素

48       $('div').click(function(){

49         $(this).css('background','green')

50       }).triggerHandler('click')

c、triggerHandler() 创建的事件不会产生事件冒泡.

52      //区别3：triggerHandler() 创建的事件不会产生事件冒泡.

53      $('div').click(function(){

54         alert('div')

55       })

56      $('#div3').triggerHandler('click')

d、triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。

triggerHandler方法的返回值是triggerHandler事件的返回值，而trigger的返回值是jquery对象

58      //区别4： triggerHandler()返回的是事件处理函数的返回值

59      // alert($('#btn1').on('click',function(){

60      //        alert('trigger')

61      //        return '100'

62      //     }).triggerHandler('click'))

63      $('#btn1').on('click',function(){

64             alert('trigger')

65             return '100'

66          }).triggerHandler('click').css('background','red')

二、jquery的事件触发函数是哪两个

1、相关知识

  1. trigger() 在每一个匹配的元素上触发某类事件。
  2. triggerHandler() 触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
    与trigger()区别
    1. triggerHandler()不会引起事件的默认行为
    2. trigger() 会操作匹配的所有元素，而triggerHandler() 只影响第一个匹配元素。
    3. triggerHandler() 创建的事件不会产生事件冒泡.
    4. triggerHandler()返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。如果没有处理程序被触发，则这个方法返回 undefined。
 

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">

     div{border:1px solid green;padding: 20px;float: left;}

       </style>

 </style>

 </head>

 <body>

 <h3>jQuery事件对象</h3>

 <input id="btn1" type="button" value="事件绑定"><br>

 <!-- <div></div><div></div><div></div> -->

 <div id="div1">

     <div id="div2">

         <div id="div3"></div>

     </div>

 </div>

 <form action="http://www.51_zxw.net/" id="myform">

   <p>姓名：<input type="text" id="user"></p>

   <p>密码：<input type="password" id="passw"></p>

   <input type="submit" value="提交">

 </form>

 <script type="text/javascript">

     $(function(){

         /*

      //trigger的额外数据

      //多条数据时候需要放到[]中

       $('#btn1').on('click',

           300,function(e,data1,data2){

           alert('trigger: '+data1+','+data2+','+e.data)

       }).trigger('click',[100,200]) 

        $('#btn1').on('click',function(){

             alert('trigger')

          }).triggerHandler('click')

        //使用trigger()与triggerHandler()的区别

        //区别1:triggerHandler()不会引起事件默认行为

       // $('#myform').trigger('submit')

       $('#myform').triggerHandler('submit')

       //区别2：triggerHandler() 只影响第一个匹配元素

       $('div').click(function(){

         $(this).css('background','green')

       }).triggerHandler('click')

      //区别3：triggerHandler() 创建的事件不会产生事件冒泡.

      $('div').click(function(){

         alert('div')

       })

      $('#div3').triggerHandler('click')

      */

      //区别4： triggerHandler()返回的是事件处理函数的返回值

      // alert($('#btn1').on('click',function(){

      //        alert('trigger')

      //        return '100'

      //     }).triggerHandler('click'))

      $('#btn1').on('click',function(){

             alert('trigger')

             return '100'

          }).triggerHandler('click').css('background','red')

     })

 </script>

 </body>

 </html>
 

js进阶 12-14 jquery的事件触发函数是哪两个的更多相关文章

  1. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  2. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  3. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  4. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  5. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  6. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  7. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  8. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  9. JS事件-对象监视事件，事件触发函数

    写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click()                      鼠标单击 dblclick()  ...

随机推荐

  1. hdu5372 Segment Game

    Problem Description Lillian is a clever girl so that she has lots of fans and often receives gifts f ...

  2. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  3. C#中函数的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 26.使用IntelliJ IDEA开发Java Web项目时，修改了JSP后刷新浏览器无法及时显示修改后的页面

    转自:https://blog.csdn.net/yuxxz/article/details/51318908 使用IntelliJ IDEA开发Java Web项目时,修改了JSP后刷新浏览器无法及 ...

  5. 2011年度十大杰出IT博客获奖感言

        2011年度十大杰出IT博客获奖感言 在各位评委.网友的支持下,我的博客从前50名中脱颖而出跻身10强,得到这个消息之后心中充满了喜悦.在这里要感谢51CTO为大家提供这样一个良好的展示平台. ...

  6. XML学习总结（2）——XML简单介绍

    一.XML概念 Extensible Markup Language,翻译过来为可扩展标记语言.Xml技术是w3c组织发布的,目前推荐遵循的是W3C组织于2000发布的XML1.0规范. 二.学习XM ...

  7. Android中级第十讲--相机录像和查看系统相册图片

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 录像比较简单,开始录制: myCamera.unlock(); ...

  8. Android app : use html or native?

    Android app可分为两种:网络(html)应用程序和原生(native)应用程序 首先,我们先来讨论下如何判断一个app是html实现还是native实现. 设置-->>开发者选项 ...

  9. PHP JSON的BUG

    将下面的数组进行 JSON 编码时出错,编码中丢掉了最后一维数组中的下标. Array ( [1] => Array ( [0] => Array ( [0] => Array ( ...

  10. Python-根据成绩分析是否继续深造

    案例:该数据集的是一个关于每个学生成绩的数据集,接下来我们对该数据集进行分析,判断学生是否适合继续深造 数据集特征展示 GRE 成绩 (290 to 340) TOEFL 成绩(92 to 120) ...