阿里巴巴面试题(转载）

原文链接：链接：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