原文链接:链接:https://blog.csdn.net/Y0Q2T57s/article/details/79989753
使用addEventListener点击li弹出内容,并且动态添加li之后有效
最后一题他没给答案,这个可以用事件委托,点击每个li弹出中间的数字
事件委托的原理:
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。子节点实现相同的功能
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> var ul = document.querySelector('ul'); var list = document.querySelectorAll('ul li'); ul.addEventListener('click', function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; for(var i = 0, len = list.length; i < len; i++){ if(list[i] == target){ alert(i + "----" + target.innerHTML); } } }); </script>
这个target,可以用
target.nodeName.toLowerCase()
判断这个标签是什么标签,target.nodeName.toLowerCase()==='li' ,表示是li标签
还可以用target.**来获取他的属性值,比如img标签里的src属性值,可以用target.src