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. Timus 1935. Tears of Drowned 具体解释

    Old Captain Jack Sparrow's friend Tia Dalma, the fortuneteller and prophetess, often makes potions. ...

  2. jquery09--Callbacks : 回调对象

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. js---17继承中方法属性的重写

    function F(){}; var f = new F(); f.name = "cf"; f.hasOwnProperty("name");//true ...

  4. A股借壳上市?暂时没戏

    近期股市波动,让不少P2P概念股打回原型.同花顺数据显示,上周五P2P概念股整体下跌9.28%,其中除了5家上市公司停牌外,14家P2P概念股跌幅都超过了9%.此前大热的多伦股份自6月23日以来,股价 ...

  5. js对象拷贝的方法

     对象拷贝的方法是一个难点,尤其是深拷贝.建议把代码都运行下,帮助理解拷贝. 一. json方法 1. 适合情况:  JSON对象的深度克隆.方法是先JSON.stringify() 转为json字符 ...

  6. nginx配置静态文件服务器的一个特殊需求的探索和分享, nginx处理不同路径返回统一文件,nginx改写,跳转请求.

    最近在做一个前后端分离的个人博客,在做自己博客的时候有个想法,本来是打算用nginx作为静态文件服务器使用,django做后端程序. 我的前端页面用vue写的,结果用组件用嗨了,发现页面列表和 详情都 ...

  7. Exclusive or

    题目连接 题意: 每次给一个n.求 (2≤n<10500) 分析: 先说一下自己的想法,假设将n换成二进制数,也就一两千位左右,那么一位一位处理是能够接受的. 将0-n写成二进制形式后,显然全部 ...

  8. VMware虚拟机XP系统安装

    转载:http://jingyan.baidu.com/article/54b6b9c00e2f452d593b4762.html

  9. 制作U盘启动盘将Ubuntu 12.04升级为14.04的方法

    1 介绍 在周六的下午,我决定想高速浏览一下书籍[1].看看这个关于Ubuntu的圣经到底在讲什么东东. 感觉讲的不错,当我看到介绍文件标记语言-TeX和LaTeX的时候,该书作者推荐在Ubuntu上 ...

  10. jquery init 关系

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st ...