微信扫一扫打赏支持

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

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、代码

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10         input{width: 100px;height: 30px;}
11         div{width: 100px;height: 100px;border:1px solid green;}
12       </style>
13 </style>
14 </head>
15 <body>
16 <h3>jQuery事件对象</h3>
17 <div id="div1"></div>
18 <input id="btn1" type="button" value="事件绑定">
19 <script type="text/javascript">
20     $(function(){
21         /*
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             }
42 
43         })
44         //$('#btn1').off()
45         $('#btn1').off('click mouseover')
46     */
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)
56 
57     })
58 </script>
59 </body>
60 </html>
复制代码

 

 

 
posted @   范仁义  阅读(687)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
侧边栏
打赏
点击右上角即可分享
微信分享提示
SQL AI 助手