WordPress发货,排名seo软件,深圳坪山天气,哈尔滨专业网站建设哪个好事件委托:利用冒泡的原理把实践添加到父元素级别上#xff0c;触发执行效果。 时间委托优点#xff1a; 1.提高性能#xff0c;不用for循环遍历所有li#xff0c;节省性能。 2.新添加的元素还会有原来之前的事件。 先看时间委托提高的性能吧#xff0c;一个常… 事件委托:利用冒泡的原理把实践添加到父元素级别上触发执行效果。 时间委托优点 1.提高性能不用for循环遍历所有li节省性能。 2.新添加的元素还会有原来之前的事件。 先看时间委托提高的性能吧一个常见的效果鼠标经过li列表背景变红鼠标移走取消背景色。下面代码是没使用时间委托 !DOCTYPE html
html
head
meta charsetutf-8 /
titletestcss/title
style/style
script typetext/javascript
window.οnlοadfunction(){var ouldocument.getElementsByTagName(ul)[0];var olioul.getElementsByTagName(li);for(var i0;ioli.length;i){oli[i].οnmοuseοverfunction(){this.style.backgroundred;};oli[i].οnmοuseοutfunction(){this.style.background;};}}
/script
/head
bodyinput typebutton value添加 idinput1/ullidemo/lilidemo/lilidemo/lilidemo/lilidemo/li/ul
/body
/html 很显然那个for循环就是性能的主要浪费者就这5个li标签还好倘若有成千上百个呢使用时间委托就不用考虑这些了 oul.οnmοuseοverfunction(ev){var evev||window.event; //ev.target代表事件源事件发生在谁身上谁就是事件源ev.srcElement是兼容IEvar targetev.target||ev.srcElement;span stylewhite-space:pre /span//if(target.is(li)) //判断是否为li标签if(target.nodeName.toLowerCase()li)//判断事件源是否为li目的是为排除ul,防止鼠标经过“大的”ul时发生变色。{target.style.backgroundred;}}oul.οnmοuseοutfunction(ev){var evev||window.event;var targetev.target||ev.srcElement;if(target.nodeName.toLowerCase()li){target.style.background;}} 这样就不用使用for循环遍历了。 第二个优点新添加的元素还会有原来之前的事件。也就是说用for循环的方法只能对现有的标签实现效果对于后来新添加的标签就不能为例了而用时间委托只要符合之前设定的标签那么新添加的标签生来就有之前定义的事件效果。下面在网页中添加一按钮点击按钮添加一些新的li标签 !DOCTYPE html
html
head
meta charsetutf-8 /
titletestcss/title
style/style
script typetext/javascript
window.οnlοadfunction(){var ouldocument.getElementsByTagName(ul)[0];var olioul.getElementsByTagName(li);var oinputdocument.getElementById(input1);oinput.οnclickfunction(){ //点击按钮插入新li标签var olidocument.createElement(li);oli.innerHTML我是新标签; //注意此句代码应写在appendChild()前面能节省性能oul.appendChild(oli);};oul.οnmοuseοverfunction(ev){var evev||window.event;//ev.target代表事件源事件发生在谁身上谁就是事件源ev.srcElement是兼容IEvar targetev.target||ev.srcElement;if(target.nodeName.toLowerCase()li){target.style.backgroundred;}}oul.οnmοuseοutfunction(ev){var evev||window.event;var targetev.target||ev.srcElement;if(target.nodeName.toLowerCase()li){target.style.background;}}}
/script
/head
bodyinput typebutton value添加 idinput1/ulli11/lili22/lili33/lili44/lili55/li/ul
/body
/html以上代码运行效果如下图所示新插入的标签依然与生俱来之前的事件 转载于:https://www.cnblogs.com/chayangge/p/4288692.html
