js中的事件机制

先来一个面试中常考的题目：

当ul被点击的时候找出是哪个li被点击了？将li的下标和内容都打印出来。

         <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>

方式1：（循环遍历li元素）注意：循环遍历的时候要使用let来定义i,因为事件属于异步的。

window.onload=function(){
            var oLi=document.getElementsByTagName('li');
            for(let i=0;i<oLi.length;i++){
                oLi[i].addEventListener('click',function(){
                    alert(i+':'+this.innerHTML);
                })
            }
}

方式2：事件委托（推荐）

   利用事件委托，不用遍历li数组了，利用冒泡机制的原理，将事件绑定到父元素层次，通过event事件的target属性就能检测到是哪个子元素触发了事件。

window.onload=function(){
            var oUl=document.getElementsByTagName('ul')[0];
            oUl.addEventListener('click',function(ev){
                var oEvent=ev||event;
                var target=oEvent.target;
                alert(target.innerHTML);
            })
}

一.事件的捕获和冒泡

  1.事件捕获阶段：先从文档的document根节点往触发事件的深层节点，由外向内捕获事件。

  2.目标阶段：到达目标事件的位置（事发地），触发事件

  3.事件冒泡阶段：从目标事件的位置往文档的根节点位置回溯，由内向外冒泡事件。

https://www.cnblogs.com/alvinwei1024/p/4739344.html