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. Android实现本地图片选择及预览缩放效果仿春雨医生

    在做项目时常常会遇到选择本地图片的需求.曾经都是懒得写直接调用系统方法来选择图片.可是这样并不能实现多选效果.近期又遇到了,所以还是写一个demo好了.以后也方便使用.还是首先来看看效果 显示的图片使 ...

  2. vim插件之ack

    这个插件其实是实现vim内部搜索功能的今天在学习vim搜索的时候,遇到了一个ack.vim的插件,这个插件给我们提供了一个并行于系统命令grep的搜索命令Ack 它的下载地址是 https://git ...

  3. Linux下截图技巧

           在需要Linux显示图片的场合,最普通的方法,会考虑用数码相,或是用Vmware,或VPc来抓拍,这样以来会比较麻烦,Linux也自带了些工具例如Gimp,ksnapshot这里我介绍一 ...

  4. vuejs模板中使用html代码

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

  5. Mindjet MindManager 思维导图软件-使用思维导图跟踪调用流程，绘制软件框架

    思维导图.据说是每一个产品经理必备的软件.假设你阅读大型源码.使用思维导图跟踪调用流程,绘制软件框架将会很方便. 特点:没什么好说的.用过的都说好. 软件截图: 下载:http://www.mindm ...

  6. hdoj-1289-A Bug&#39;s Life【种类并查集】

    A Bug's Life Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...

  7. 《iOS Human Interface Guidelines》——Container View Controller

    容器视图控制器 容器视图控制器管理和展示它的子视图集合--或者子控制器集合--以一种自己定义的方式. 系统定义的容器视图控制器的样例有标签栏视图控制器.导航栏视图控制器和分栏视图控制器(查看Tab B ...

  8. Linux - 用 Konstruct 安装 KDE 3.x

    make-kde3.x Linux - 用 Konstruct 安装 KDE 3.x 找个截图工具 khtml2png (http://khtml2png.sourceforge.net/), 现在都 ...

  9. GridView-属性大全

    这是个网格控件 他的实现也是通过adapter来实现的,感觉跟listview在使用上并没有多大的区别 常见属性如下 1.android:numColumns=”auto_fit” //GridVie ...

  10. Linux架设Jsp环境

    本文已发表在2010年<网管员世界> 650) this.width=650;" onclick="window.open("http://blog.51ct ...