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、相关知识
事件处理
-
事件绑定
on() 为某些元素绑定一个事件或者多个事件。该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
-
事件解绑
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>