0
点赞
收藏
分享

微信扫一扫

JS事件委托

一ke大白菜 2022-11-20 阅读 73


html
<ul id="wrap">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>

js
$(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';
});

});

作者:梵天wwlsky


举报

相关推荐

0 条评论