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. IO流入门-第二章-FileOutputStream

    FileOutputStreamj基本用法和方法示例 /* java.io.OutputStream java.io.FileOutputStream 文件字节输出流 将计算机内存中的数据写入到硬盘文 ...

  2. Java基础 - 字符串 String

    字符串就是用字符拼接成的文本值,字符串在存储上类似数组,在java语言中把字符串当做对象进行处理 创建字符串 package com.mingri.chapter_02; public class d ...

  3. 模块 - json/pickle/shelve/xml/configparser

    序列化: 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes. 为什么要序列化: 有种办法可以直接把内存数据(eg:10个列表,3 ...

  4. django博客项目3：创建 Django 博客的数据库模型

    设计博客的数据库表结构 博客最主要的功能就是展示我们写的文章,它需要从某个地方获取博客文章数据才能把文章展示出来,通常来说这个地方就是数据库.我们把写好的文章永久地保存在数据库里,当用户访问我们的博客 ...

  5. Java AES512加密算法

    AES - 高级加密标准: 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这 ...

  6. MySQL 单表查询（Day42）

    阅读目录 一,查询语法 二,简单查询 三,where约束 四,having过滤 五,分组查询 group by 六,关键字的执行优先级 七,查询排列 order by 八,使用聚合函数查询 九,whe ...

  7. 利用开源的TaskScheduler组件实现监控和管理windows计划任务

    对于计划任务的执行有很多种解决方案,如利用开源Quartz作业调度框架,在SQL Server的作业等等,同时Windows的任务计划程序功能也很强大,利用此可以很方便的实现很多计划任务,除了人工进行 ...

  8. 微信小程序 canvas 生成随机验证码

    转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...

  9. 20包含min函数的栈

      题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.   建一个辅助栈,把每次最小最小的元素(之前最小元素,与当前新入栈的元素比较)放在辅助栈里.   import j ...

  10. URAL - 1901 Space Elevators

    题目: Nowadays spaceships are never launched from the Earth's surface. There is a huge spaceport place ...