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. <2014 05 21> 互联网时代的C语言——Go（2）

    **************************************************************************************************** ...

  2. QStorageInfo获取磁盘信息（非常详细）

    QStorageInfo类提供了系统当前挂载的存储和驱动器的相关信息,包括它们的空间,挂载点,标签名,文件系统名. 一般,我们可以使用特定的文件或目录来创建一个QStorageInfo类的对象,也可以 ...

  3. golang 常用的日期方法和时区的坑

    import( "time" ) 1.获取当前时间 time.Now(),返回类型:time结构. 2.字符串转为日期 t, _ := time.ParseInLocation(& ...

  4. centos上源码安装clang 3.8

    之前想在centos系统上安装clang 3.6版本,由于yum上版本太低,想通过源码编译安装.按照网上说的源码安装步骤,下好llvm.clang.clang-tools-extra和compiler ...

  5. ［intellij］create gradle project

    https://intellij-support.jetbrains.com/hc/en-us/community/posts/206806425/comments/206797339

  6. PAT 天梯赛 L1-005. 考试座位号 【MAP标记】

    题目链接 https://www.patest.cn/contests/gplt/L1-005 题意 有一个 考生号,一个试机座位,一个考试座位,给出试机座位,查询 考生号和考试座位 思路 MAP + ...

  7. Codeforces Round #395 (Div. 2) C. Timofey and a tree

    地址:http://codeforces.com/contest/764/problem/C 题目: C. Timofey and a tree time limit per test 2 secon ...

  8. hdu4749 kmp应用

    呃,从网上看的题解,然而其实有点地方还没搞懂,先放在这,以后再回来理解. 题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=4749 题目:2013 is ...

  9. thinkphp api架构搭建

    1.结构搭建 模块下面使用 controller , model ,service,validate分别对应的作用 controller控制器里面可以进行分版本 v1,v2之类的,不过要访问通必须配置 ...

  10. Python3.x：pyodbc调用sybase的存储过程

    Python3.x:pyodbc调用sybase的存储过程 示例代码 # python3 # author lizm # datetime 2018-03-02 17:00:00 # -*- codi ...