jQuery事件委托

事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。
如下html，如果不用事件委托，将每一个li都去添加click事件监听，非常麻烦。
另外就是如果通过js动态创建的子节点，需要重新绑定事件。
而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件
eg：
<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#wrapthis.style.border = '2px solid #f00';});});

转载于:https://www.cnblogs.com/ldlx-mars/p/6936273.html

jQuery事件委托相关推荐

jquery事件委托_jQuery事件委托
jquery事件委托 jQuery使JavaScript中的事件处理变得容易. 但是,定义的事件处理程序越多,使用的内存就越多,最终可能会降低性能并导致UI变慢. 本文探讨事件委托如何帮助防止这种情况 ...
jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法
jquery 列表hover效果 <ul class="list"><li class="item"><span>1< ...
html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
Jquery事件委托之Safari
什么是事件委托事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
09 jQuery事件委托小米购物车
小米购物车 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
jquery事件委托off与on连用无效的问题
问题引出: 事件委托是一种非常常用的事件解决方案,也是很多人推荐作为首选的解决方案(事件委托有什么好处,为何推荐,跟本文要说的内容无关,可自行百度).我们在事件处理的时候可能会这么用$selector ...
原生JS及jQuery中事件委托的写法
在绑定节点事件处理程序时遇到的问题: 每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间. 采 ...
Mr.J-- jQuery学习笔记(十一)--事件委托
jQuery事件委托事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运 ...
JQuery --- 第三期 (jQuery事件相关)
个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta char ...

jQuery事件委托

jQuery事件委托相关推荐

最新文章

热门文章