jquery事件繫結與事件委託
阿新 • • 發佈：2021-07-26
事件
頁面載入 ready(fn) //當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。 $(document).ready(function(){}) -----------> $(function(){}) 事件處理 $("").on(eve,[selector],[data],fn) // 在選擇元素上繫結一個或多個事件的事件處理函式。 // .on的selector引數是篩選出呼叫.on方法的dom元素的指定子元素，如： // $('ul').on('click', 'li', function(){console.log('click');})就是篩選出ul下的li給其繫結 // click事件； [selector]引數的好處: 好處在於.on方法為動態新增的元素也能綁上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的繫結方式和 //$('ul li').bind('click', function(){console.log('click');})一樣；我通過js給ul添加了一個 //li：$('ul').append('<li>js new li<li>')；這個新加的li是不會被綁上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式繫結，然後動態新增 //li:$('ul').append('<li>js new li<li>');這個新生成的li被綁上了click事件 [data]引數的呼叫: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </while True: print('studying...')ul> <button>add</button> <script src="jquery-3.3.1.js"></script> <script> // 事件繫結 // let eles=document.getElementsByTagName('li'); // for (let i=0; i<eles.length; i++) { // eles[i].onclick=function () { // alert('js'); // }; // }; // js繫結方式 // 簡寫 // $('ul li').click(function () { // alert('jquery'); // }); // 全寫 // $('ul li').bind('click',function () { // alert('jquery'); // }); // 解除 // $('ul li').unbind('click'); // 事件委託on() $('button').click(function () { let $ele=$('<li>'); let len=$('ul li').length; $ele.html((len+1)*111); $('ul').append($ele); }); // $('ul li').click(function () { // alert('hello'); // }); // 新新增的li標籤沒有點選事件 $('ul').on('click','li',function(){ alert('hello'); }); // 新新增的li標籤也有了點選事件 </script> </body> </html>