随笔一个dom节点绑定事件
以下利用jquery说明:
js中,给一个dom节点绑定事件再平常不过了。这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况。
比如代码如下:
li的节点,绑定了事件:点击会打出来里头的html内容。
button点击事件:会生成一个li节点。
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <ul class="ul"> 7 <li class="li">abc</li> 8 <li class="li">abc</li> 9 <li class="li">abc</li> 10 </ul> 11 12 <hr/> 13 <button id="btn">add</button> 14 </body> 15 <script type="text/javascript" src="jquery.js"></script> 16 <script type="text/javascript"> 17 $(function(){ 18 19 $('.li').click(function(){ 20 console.log(this.innerHTML); 21 }); 22 23 $('#btn').on('click', function(){ 24 $('.ul').append('<li class="li">XXX</li>'); 25 }); 26 27 }); 28 29 </script> 30 </html>
如果这么写的话,点击以后生成的li节点,点击是不会打出log的~
因为代码执行来看,未点击add时,我们给每一个li绑定了click事件,这仅限于当前dom树下的li。$('.li')仅是获取当前dom下的所有class为li的节点。
当点击button后,再生成的节点,是绑定不上的。
咋办咧?此时,我们会利用事件的冒泡或者捕获的机制,对li的父节点ul打主意~如果给ul绑定一个click事件,那么即便是点击新生成的它的子节点,不也有了事件么?哈哈~就是这样
代码如下:
$('.ul').on('click', '.li', function(){ console.log(this.innerHTML); });
我们给.ul绑定了事件,在其中选择.li选择器,这样就解决了~