冒泡事件與事件委托
阿新 • • 發佈：2018-05-10
冒泡事件 事件委托 jquery 事件發生:任何一次操作,都會產生相應的事件
事件監聽:程序中是寫了代碼對關註事件進行捕捉和處理
事件監聽:程序中是寫了代碼對關註事件進行捕捉和處理
冒泡事件:子元素觸發的事件會向上傳遞,如果父類有監聽同類型事件,會被激活
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>冒泡事件</title> <style> .red{ width: 400px; height: 400px; margin: 10px; background-color: red; } .green{ width: 300px; height: 300px; background-color: green; } .blue{ width: 200px; height: 200px; background-color:blue; } </style> <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ $(‘.blue‘).click(function(){ alert(‘blue‘); }); $(‘.green‘).click(function(){ alert(‘green‘); }); $(‘.red‘).click(function(){ alert(‘red‘); }); $(window).click(function(){ alert(‘window‘); }); }) </script> </head> <body> <div class="red"> <div class="green"> <div class="blue"> </div> </div> </div> </body> </html>
效果如下:
事件冒泡:子元素事件向上傳遞
點擊藍色方塊--->綠色-->紅色-->window
事件委托:利用冒泡原理,把一些事件集中處理
jquery中使用delegate方法:
使用樣列:
$(‘獲取父類元素‘).delegate(‘子元素‘,‘事件‘,function(){
})
<head> <title>jquery事件的委托</title> <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ // 事件委托使用delegate, 將子元素事件委托給父類元素處理 // 好處是我們不需要循環綁定每一個子元素事件.提升性能 $(‘.list‘).delegate(‘li‘,‘click‘,function(){ $(this).css({‘color‘:‘red‘}) }) }) </script> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body>
冒泡事件與事件委托