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. leetCode 27.Remove Element (删除元素) 解题思路和方法

    Remove Element Given an array and a value, remove all instances of that value in place and return th ...

  2. 自建的IPV6管道

    前阵子琢磨IPV6,建立了一个给本机分配IPV6地址的管道,不怎么稳定  http://6tu.me

  3. es62

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

  4. 如何实现对网站页面访问量的统计（javaweb和php）

    如何实现对网站页面访问量的统计(javaweb和php) 一.总结 一句话总结:其实很简单啦,每访问一次那个页面对应的index函数(控制器中的那个函数)访问次数就加1就可以了. 1.javaweb中 ...

  5. spring cloud config配置中心源码分析之注解@EnableConfigServer

    spring cloud config的主函数是ConfigServerApplication,其定义如下: @Configuration @EnableAutoConfiguration @Enab ...

  6. iOS-APP-Icon 图标启动图及名字的设置

    本文讲下appIcon图标.启动图及名字的设置 icon for iOS 图标大小参照苹果官网:https://developer.apple.com/library/ios/qa/qa1686/_i ...

  7. 搭建Spark源码研读和代码调试的开发环境

    转载自https://github.com/linbojin/spark-notes/blob/master/ide-setup.md 搭建Spark源码研读和代码调试的开发环境 工欲善其事,必先利其 ...

  8. 2017国家集训队作业[agc008f]Black Radius

    2017国家集训队作业[agc008f]Black Radius 时隔4个月,经历了省赛打酱油和中考各种被吊打后,我终于回想起了我博客园的密码= = 题意: ​ 给你一棵树,树上有若干个关键点.选中某 ...

  9. Ansible学习记录五：PlayBook学习

    0.介绍 Playbooks 是 Ansible 管理配置.部署应用和编排的语言,可以使用 Playbooks 来描述你想在远程主机执行的策略或者执行的一组步骤过程等 类似于一组任务集,定义好像项目, ...

  10. ps---报告当前系统的进程状态

    ps aux最初用到Unix Style中,而ps -ef被用在System V Style中,两者输出略有不同.现在的大部分Linux系统都是可以同时使用这两种方式的. linux上进程有5种状态: ...