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. UIButton文字居左显示

    题外话:时间依然过的非常快.不知不觉2015年就过去一半了.感觉自己好像没有大的改变.仅仅能感叹时间飞逝,却不能有所收获. 我从来都不是一个安于现状的人,改变自己的想法从未停止过.我想大多数人都跟我有 ...

  2. es62

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ubuntu 分屏工具

    本文提到的分屏工具,均可通过sudo apt-get install的方式进行安装: 基本:terminator 高级:tmux,screen 还可进一步使用:ctrl + superkey + 方向 ...

  4. How to install Armbian on Orange Pi Plus 2e

    bian on Orange Pi Plus 2e How to install Armbian on Orange Pi Plus 2e Armbian on the microSD You jus ...

  5. windows WEB 高可用/可伸缩

    windows NLB+ARR实现Web负载均衡高可用/可伸缩   基于IIS的ARR负载均衡 基于NLB负载均衡 这两篇分别分ARR 和 NLB基本配置,下面我们讲讲,如何组合使用,搭配成高可用/可 ...

  6. OpenCV —— 轮廓

    把检测出的边缘像素组装成轮廓  ——  cvFindContours OpenCV 使用内存存储器来统一管理各种动态对象的内存.内存存储器在底层被实现为一个有许多相同大小的内存块组成的双向链表 内存储 ...

  7. chattr---文件隐藏属性

  8. IDLE的自动补全功能

    IDLE的自动补全功能位于:Edit→Show Completions,但每次需要补全的时候都需要点击一次,虽然IDLE提供了一个快捷键(Ctrl + Space),但实测无效.具体操作如下图

  9. home.pl 正在促销，一些域名免费（终止于2017.4.4）

    home.pl 正在促销,一些域名免费(终止于2017.4.4) home.pl 成立于1997年,是波兰顶尖的互联网服务公司.专注于域名登记,托管网站,保持电子邮件帐户等.  home.pl 正在促 ...

  10. 1.3 Quick Start中 Step 6: Setting up a multi-broker cluster官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Step 6: Setting up a multi-broker cluster ...