jquery事件绑定与事件委托_随笔

事件页面载入 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> </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>

jquery事件绑定与事件委托

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/1006577.html

jquery事件绑定与事件委托

发表评论

评论列表（0条）