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. Powershell About LocalGroupMembership

    一: 结合active directory获取本地群组成员信息(包含本地用户和域用户,及域用户的情况 $DBServer = "xxxx" $DBDatabase = " ...

  2. 初识python （一）

    初识Python(一) python2和python3的一些区别 Python2 和 Python3 区别汇总:http://www.cnblogs.com/bigtreei/p/7806288.ht ...

  3. servlet 通过 FileItem 实现多文件上传

    [本文简介] 一个servlet 多文件上传的简单例子. [依赖包] commons-fileupload-1.3.1.jar commons-io-2.2.jar [依赖包下载] commons-f ...

  4. flask实现获取表单并执行shell

    1.一个HTML form input和一个button提供给用户输入 2.使用flask的request获取用户输入的文件名 3.判断输入异常 4.执行shell命令touch aa.txt 并返回 ...

  5. R中的data.table 快速上手入门

    data.table包提供了一个非常简洁的通用格式:DT[i,j,by]. 可以理解为:对于数据集DT,选取子集行i,通过by分组计算j. 对比与dplyr等包,data.table的运行速度更快. ...

  6. python 测试代码

    1.使用print()打印 测试代码最简单的就是添加一些print()语句.然而产品开发中,需要记住自己添加的所有print()语句并在最后删除,很容易出现失误. 2.使用pylint.pyflake ...

  7. 在vps主机上***

    一.安装 Shadowsocks服务端: 1.下载软件包 yum install python-setuptools && easy_install pip pip install s ...

  8. hibernate validator 验证

    @AssertTrue 用于boolean字段,该字段只能为true   @AssertFalse 该字段的值只能为false @CreditCardNumber 对信用卡号进行一个大致的验证 @De ...

  9. SpringMVC学习大纲

    PartA: 1.SpringMVC介绍 2.入门程序 3.SpringMVC架构讲解 a) 框架结构 b) 组件说明 4.SpringMVC整合MyBatis 5.参数绑定 a) SpringMVC ...

  10. Java Web专题