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
链接:http://www.jianshu.com/p/847568e6149e
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
JS事件委托
最新推荐文章于 2022-04-05 20:52:07 发布