🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
事件代理也叫事件委托,是指将要触发的事件绑定到目标元素的父元素上,利用冒泡机制来触发该事件。 一般用在目标元素是动态添加的,无法在初次渲染页面时挂载事件,只能在其父级元素上去代理一下。 或者是不想单独为每个相同的元素都去绑定一个事件,统一用一个父级事件去处理完事了。 更高级一点的使用原因是减少内存占用,如果有100个li就要占100个内存空间去存事件对象,性能有影响,直接绑到父级上,一块处理就完事了。 下面是一个例子: 在ul元素下有很多li,需要给动态添加的li去添加click事件,只能用事件代理的方式,将事件绑定到ul上。 ~~~text parentUl.addEventListener('click', function(e){ var target = event.target || event.srcElement; if(!!target && target.nodeName.toUpperCase() === "LI"){ console.log(target.innerHTML); } }, false); ~~~ 在以上代码中,请注意target.nodeName的使用,这个是判断事件触发目标的根本抓手。