DOM 事件相关

一丶什么是事件委托？

事件委托的原理：事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

简单的实现方法代码如下

let ul = document.querySelector('.xxx')

ul.addEventListener('click',(e)=>{
  if(e.target.tagName.toLowerCase==='li'){
    console.log('li被点击了')
  }
})

如果使用该方法时li中仍然包含子元素，子元素被点击时则无法触发，原因是e.target表示触发事件的元素，并且e.currentTarget表示被监听的元素。

为满足上述情况优化后如下：

ul.addEventListener('click', function(e) {
  var target = e.target;
  while (target !== ul) {
    if (target.tagName.toLowerCase() == 'li') {
      console.log('li被点击了');
      break;
    }
    target = target.parentNode;
  }
})

二丶怎么阻止默认动作？

浏览器的默认事件就是浏览器自己的行为，比如我们在点击的时候，浏览器跳转到指定页面。还有，当我们滚动鼠标时页面会向下滚动，但我们按空格键和按方向键时页面也会向下滚动，为了更好的用户体验，这时我们就需要阻止这种行为的发生。

 function stopDefault( e ) { 
if ( e && e.preventDefault ){
     e.preventDefault(); //阻止默认浏览器动作(W3C) 
 }else {
    window.event.returnValue = false; //IE中阻止函数器默认动作的方式 
 }
return false; 
}

javascript的return false只会阻止默认行为,只需要支持高版本浏览器的话，一句话即可。

obj.onclick = function (){ 
  return false; 
}

三丶怎么阻止事件冒泡？

我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。

当需要停止冒泡行为时，可以使用：

function stopBubble(e) { 
 //如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ){ 
    e.stopPropagation(); //因此它支持W3C的stop  Propagation()方法 
 }else{ 
    window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡 
 }
}

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡

 //jQuery，既阻止默认行为又停止冒泡
$("#testA").on('click',function(){
  return false;//当然 也阻止了事件本身
});