JavaScript实现事件委托

事件流分为三个阶段，依次为捕获阶段(父->子)、目标阶段、冒泡阶段(子->父)，事件触发顺序为捕获阶段–目标阶段–冒泡阶段；

平时给元素绑定事件一般是直接写到属性上（即0级事件处理程序）或是addEventListener()监听事件（2级事件处理程序）。但有些应用场景以上方法可能不太管用，比如给后来动态添加的元素绑定事件监听。这时就可以使用事件委托了（也叫事件代理）。事件委托简单通俗理解就是，给外层元素绑定事件，然后利用事件冒泡，针对当前触发的元素执行相应的函数。

    

        
第一条
        
第二条
        
第三条
    
    添加列表
    

 示例：通过点击每张图片，弹出相应的视频

 

		

         
    
    

          
    
    

         
     
     

          
     
 
 

   

    

        

              
视频播放
               

                    
                 
                

                     X
                  
           
      
 

 let videoList = [
        'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
        'http://vjs.zencdn.net/v/oceans.mp4',
        'https://media.w3.org/2010/05/sintel/trailer.mp4',
        'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
    ];
    let dialog = document.getElementById("dialog");
    let player = document.getElementById('playModel_1');
    let video = document.getElementById('myvideo');
    dialog.style.display = "none";

    on(player, 'click','img',function (e) {
        let parent =  e.target.parentElement;
        let index =Array.prototype.indexOf.call(parent.parentNode.children, parent);
        dialog.style.display = '';
        video.src = videoList[index]

    });
    function on(el, eventType, select, fn) {
        if (fn === undefined){ // 自身绑定
            fn = select;
            select = null;
            el.addEventListener(eventType, fn , false)
        }else {
            el.addEventListener(eventType,function (e) {
                if (e.target.matches(select)){
                    fn.call(e.target,e)
                }
            },false)
        }
    }
    function cancel() {
        let videoPlayer = document.getElementById('myvideo');
        videoPlayer.pause();
        dialog.style.display = "none";
    }