<script> window.onload = function(){ var ul = document.querySelector("ul"); var lis = document.querySelectorAll("li"); for(var i=0; i<lis.length; i++){ lis[i].index = i; lis[i].onclick = function(event){ event = event || window.event; console.log(event.target.innerText, event.target.index); } } ul.addEventListener("click",function(e){ e = e || window.event; console.log(e.target.innerText, e.target.index); },false); for(var i=0; i<lis.length; i++){ lis[i].index = i; } var btn = document.querySelector("#btn"); var txt = document.querySelector("#txt"); btn.onclick = function(){ var li = document.createElement("li"); li.innerText = txt.value; ul.appendChild(li); } } </script>

这是一段 JavaScript 代码，主要实现了以下功能：

1. 获取 ul 元素和所有的 li 元素，并为每个 li 元素添加一个 index 属性。
2. 给每个 li 元素添加一个点击事件，当点击时，会在控制台输出该 li 元素的文本内容和 index 值。
3. 给 ul 元素添加一个点击事件，当点击 li 元素时，会在控制台输出该 li 元素的文本内容和 index 值。
4. 给添加按钮 btn 添加一个点击事件，当点击时，会创建一个新的 li 元素，并将其添加到 ul 元素中。

值得注意的是，代码中使用了事件委托，即将事件绑定到父元素上，通过 event.target 来获取触发事件的子元素。这样可以减少事件绑定的数量，提高页面性能。