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

一、总结

一句话总结：on和off。

1、jquery如何给元素绑定事件？

on方法

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

23             alert('事件绑定')

24         })

2、如何给元素绑定多个事件（两种方法）？

json对象
on方法直接添加多个

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

23             alert('事件绑定')

24         })

25         //绑定多个事件

26         $('#btn1').on('mouseover',function(){

27             $(this).css('background','orange')

28         })

29         $('#btn1').on('mouseout',function(){

30             $(this).css('background','#ccc')

31         })

32

33         //适用对象作为参数

34         $('#btn1').on({

35             click:function(){alert('事件绑定')},

36             mouseover:function(){

37                $(this).css('background','orange')

38             },

39             mouseout:function(){

40                 $(this).css('background','#ccc')

41             }

3、如何解除元素的所有事件？

off()方法不带参数

44         //$('#btn1').off()
45         $('#btn1').off('click mouseover')

4、编程语言中移除所有效果一般是方法进行什么操作？

不带参数，比如解绑off()方法

5、如何移除同一个事件（比如click）的多个函数？

参数，指定，

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

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

49         function fn1(){

50             alert('事件绑定1')

51         }

52         function fn2(){

53             alert('事件绑定2')

54         }

55         $('#btn1').off('click',fn1)

二、jquery绑定事件和解绑事件是什么

1、相关知识

事件处理

  1. 事件绑定

    on() 为某些元素绑定一个事件或者多个事件。

    该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

  2. 事件解绑

    off() 解除绑定的某一指定的事件或者所有事件。

    “绑定”与“解绑”是相反的关系。在jQuery中，我们可以通过off()方法解除绑定的某一指定的事件或者所有事件。

    对同一元素绑定的多个同一事件进行解绑，可以使用命名空间解决，例如‘click.a’‘click.b’

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

         input{width: 100px;height: 30px;}

         div{width: 100px;height: 100px;border:1px solid green;}

       </style>

 </style>

 </head>

 <body>

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

 <div id="div1"></div>

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

 <script type="text/javascript">

     $(function(){

         /*

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

             alert('事件绑定')

         })

         //绑定多个事件

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

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

         })

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

             $(this).css('background','#ccc')

         })

         //适用对象作为参数

         $('#btn1').on({

             click:function(){alert('事件绑定')},

             mouseover:function(){

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

             },

             mouseout:function(){

                 $(this).css('background','#ccc')

             }

         })

         //$('#btn1').off()

         $('#btn1').off('click mouseover')

     */

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

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

         function fn1(){

             alert('事件绑定1')

         }

         function fn2(){

             alert('事件绑定2')

         }

         $('#btn1').off('click',fn1)

     })

 </script>

 </body>

 </html>
 

js进阶---12-10、jquery绑定事件和解绑事件是什么的更多相关文章

  1. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

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

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

  3. js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEv ...

  4. JS---DOM---为元素绑定事件和解绑事件的兼容代码

    1. 绑定事件的兼容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEve ...

  5. jq 绑定事件和解绑事件

    <!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...

  6. JS添加事件和解绑事件：addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  7. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  8. js进阶 12 jquery事件汇总

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

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

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

随机推荐

  1. 第三课补充01——set类型 sorted类型命令操作详解，redis管道及事务

    1. set类型的命令操作: (1)sadd命令:向key指定的set集合添加成员 ##sadd命令:是设置set集合类型的数据,sadd  <key> <mumber> [& ...

  2. emo前端

    1 点击按钮可以在form中添加input控件,以name给input编号,然后点击按钮ajax上传表单,在回调函数中弹框显示结果: <form id="newfriends" ...

  3. pop 在列表中和字典中的区别

    pop 在列表中和字典中的区别 字典中 pop() 语法:dict.pop(key,[value]) 说明:删除指定键及对应的值,如果在字典中不存在键及value,则返回pop()中指定的key对应的 ...

  4. Java实现八大排序之冒泡排序

    冒泡排序 冒泡排序的定义: 冒泡排序(Bubble Sort)它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该 ...

  5. Java中对Clone的理解

    面试中经常遇到Clone的相关知识,今天总算是把Clone理解的比较透彻了!Java中Clone的概念大家应该都很熟悉了,它可以让我们很方便的“制造”出一个对象的副本来,下面来具体看看java中的Cl ...

  6. 5 TensorFlow入门笔记之RNN实现手写数字识别

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

  7. Java并发（6）：concurrent包中的Copy-On-Write容器

    一. concurrent包介绍 在JDK1.5之前,Java中要进行业务并发时,通常需要有程序员独立完成代码实现,而当针对高质量Java多线程并发程序设计时,为防止死蹦等现象的出现,比如使用java ...

  8. NGUI 3.50 UIButton使用

    在NGUI,3.X的版本中,取消了创建UIbutton这个选项,所以我们可以创建uisprite.uilabel等,然后在上面附加uibutton脚本,达到目的,具体步骤 1:在界面上键好2D或3D ...

  9. 关于获得MFC窗口其它类指针的方法(csdn)

    转自:http://tieba.baidu.com/p/252804018 访问应用程序的其它类 获得CWinApp: -在CMainFrame,CChildFrame,CDocument,CView ...

  10. APDU指令返回码及其代表含义

    9000 正常 成功执行6200 警告 信息未提供6281 警告 回送数据可能出错6282 警告 文件长度小于Le6283 警告 选中的文件无效6284 警告 FCI格式与P2指定的不符6300 警告 ...