js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
一、总结
一句话总结：通过事件委托的方式，通过on方法
1、on方法在事件绑定的时候，data方式带额外参数时，字符串参数和其它参数的使用不一样，为什么？
因为字符串参数默认会被当成动态生成元素的事件绑定方法，所以需要在前面添加参数null。
64 $(\'#btn1\').on(\'click\',null,\'div\',function(e){
65 alert(\'事件绑定\'+e.data)
66 })
对比一下额外参数的json对象
44 //额外数据
45 // $(\'#btn1\').on(\'click\',{name:\'张三\'},function(e){
46 // alert(\'事件绑定\'+e.data.name)
47 // })
2、jquery如何给动态创建出来的元素绑定事件？
参数里面的第一个div是给动态生成的div绑定事件，第二个div是传递的额外参数。
59 $(document).on(\'click\',\'div\',\'div\',function(e){
60 alert(\'事件绑定\'+e.data)
61 $(this).css(\'background\',\'orange\')
62 })
3、on方法如何使用？
事件名字符串，函数或者函数名，
中间参数为动态绑定事件的元素，比如div，后面是传递的额外参数
59 $(document).on(\'click\',\'div\',\'div\',function(e){
60 alert(\'事件绑定\'+e.data)
61 $(this).css(\'background\',\'orange\')
62 })
二、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: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px} 12 </style> 13 </style> 14 </head> 15 <body> 16 <h3>jQuery事件对象</h3> 17 <input id="btn1" type="button" value="事件绑定"><br> 18 <div></div> 19 <script type="text/javascript"> 20 $(function(){ 21 /* 22 $(\'#btn1\').on(\'click\',fn1) 23 $(\'#btn1\').on(\'click\',fn2) 24 function fn1(){ 25 alert(\'事件绑定1\') 26 } 27 function fn2(){ 28 alert(\'事件绑定2\') 29 } 30 $(\'#btn1\').off(\'click\',fn1) 31 32 //命名空间 33 $(\'#btn1\').on(\'click.a\',function(){ 34 alert(\'事件绑定1\') 35 }) 36 $(\'#btn1\').on(\'click.b\',function(){ 37 alert(\'事件绑定2\') 38 }) 39 $(\'#btn1\').on(\'mouseover.a\',function(){ 40 $(this).css(\'background\',\'orange\') 41 }) 42 $(\'#btn1\').off(\'.a\') 43 44 //额外数据 45 // $(\'#btn1\').on(\'click\',{name:\'张三\'},function(e){ 46 // alert(\'事件绑定\'+e.data.name) 47 // }) 48 $(\'#btn1\').on(\'click\',\'abc\',function(e){ 49 alert(\'事件绑定\'+e.data) 50 }) 51 52 //动态绑定事件 53 $(\'#btn1\').on(\'click\',function(e){ 54 $("<div></div>").appendTo($(\'body\')) 55 }) 56 // $(\'div\').on(\'click\',function(){ 57 // $(this).css(\'background\',\'orange\') 58 // }) 59 $(document).on(\'click\',\'div\',\'div\',function(e){ 60 alert(\'事件绑定\'+e.data) 61 $(this).css(\'background\',\'orange\') 62 }) 63 */ 64 $(\'#btn1\').on(\'click\',null,\'div\',function(e){ 65 alert(\'事件绑定\'+e.data) 66 }) 67 }) 68 </script> 69 </body> 70 </html>