- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <ul id="ul">
- <li > 我是标签一 </li>
- <li > 我是标签二 </li>
- <li > 我是标签三 </li>
- <li > 我是标签四 </li>
- <li > 我是标签五 </li>
- </ul>
- </body>
- </html>
- <script type="text/javascript">
- /**
- * 如果需要给 ul 下面所有的 li 都添加一个点击事件的话; 我们一般会这么写:
- * 这么写需要先找到 ul, 然后遍历 li, 然后给所有的 li 标签添加点击事件
- * */
- var oli = document.getElementsByTagName("li");
- // for (var i=0; i<oli.length;i++) {
- // oli[i].onclick = function() {
- // console.log(this.innerHTML);
- // }
- // }
- /**
- * 运用事件委托怎么处理呢?
- * */
- var oul = document.getElementById("ul");
- oul.onclick = function(event){
- var e = event || window.event;
- var target = e.target || e.srcElement;
- console.log(target.innerHTML);
- }
- </script>
来源: http://www.bubuko.com/infodetail-2521635.html