jQuery 事件委托(上级节点——下级节点)
<ul id="wrap"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul>
$(function(){ // 普通事件 $('li').click(function(){ $(this).css('background', '#D4DFE6'); }); // 动态添加DOM节点 $('#addBtn').click(function(){ $('#wrap').append( $('<li>item'+ ($('li').length + 1) +'</li>') ); }); /** * 事件委托 */ // jQuery 1.9已废弃 /*$('li').live('click', function(){ $(this).css('background', '#D4DFE6'); });*/ // jQuery的delegate写法 $('#wrap').delegate('li', 'click', function(ev){ // this 指向委托的对象 li $(this).css('background', '#D4DFE6'); // 找到父级 ul#wrap $(ev.delegateTarget).css('border', '2px solid #f00'); }); // jQuery的on的写法 $('#wrap').on('click', 'li', function(ev) { // this 指向委托的对象 li $(this).css('background', '#D4DFE6'); // 找到父级 ul#wrap $(ev.delegateTarget).css('border', '2px solid #f00'); }) // js原生写法 var _wrap = document.getElementById('wrap'); _wrap.addEventListener('click', function(ev){ var ev = ev || event; if( ev.target.nodeName == 'LI' ) { ev.target.style.background = '#8EC0E4'; console.log( ev.target.innerHTML ); } // 找到父级 ul#wrap this.style.border = '2px solid #f00'; }); });
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步