重绘是指当元素样式改变时,浏览器会根据元素的新样式重新绘制元素的外观。重排是指当 DOM 树的一部分发生变化时(例如元素尺寸改变),浏览器会重新创建 DOM 树。
当页面中很多表格或列表需要添加事件时,如果逐个添加那就太麻烦了,但是使用事件委托就能极大的减轻我们的工作量,同时也能提高页面的性能。注意:使用事件委托时,并不是说把事件委托给随意一个父元素就行。因为事件冒泡的过程也需要消耗时间,距离越远,所需的时间也就越长,所有最好在直接父元素上使用事件委托。
假如我们要为 ul 列表下的每个 li 标签添加点击事件,如果不使用事件委托,最简单的办法就是使用循环来为每个 li 标签绑定事件,示例代码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> window.onload = function(){ var the_ul = document.getElementById('list'); var the_li = the_ul.getElementsByTagName('li'); for( var i=0; i < the_li.length; i++ ){ the_li[i].onclick = function(){ console.log(this.innerHTML) } } } </script> </body> </html>通过上面的代码可以看出,要为每个 li 标签绑定点击事件,首先需要找到 ul 标签,然后通过 ul 标签找到所有 li 标签, 最后在通过遍历所有 li 标签来绑定事件。若使用事件委托的话,就会简单很多,示例代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> window.onload = function(){ var the_ul = document.getElementById('list'); the_ul.onclick = function(e){ console.log(e.target.innerHTML) } } </script> </body> </html>通过代码可以看出,使用事件委托我们只需要为 ul 标签绑定事件,当 li 标签被点击时,由于事件冒泡的特性,会触发 ul 标签上的事件,我们只需要在事件中通过 event 对象中的 target 属性来找到被点击的 li 标签即可。不过这样做也有一个弊端,那就是当我们点击 ul 标签时,也会触发事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript</title> </head> <body> <ul id="list" style="width: 100px;margin:0;float: left;"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button style="float:left;" id="addli">添加一个 li</button> <button style="float:left;" id="delli">删除一个 li</button> <script> window.onload = function(){ var the_ul = document.getElementById('list'); var the_li = the_ul.getElementsByTagName('li'); var sum = the_li.length the_ul.onclick = function(e){ console.log(e.target.innerHTML) }; document.getElementById('addli').onclick = function (){ var newli = document.createElement("li"); newli.innerHTML = ++sum; the_ul.appendChild(newli); }; document.getElementById('delli').onclick = function (){ the_ul.firstElementChild.remove(); }; } </script> </body> </html>
本文链接:http://task.lmcjl.com/news/5092.html