解释以下概念：事件传播机制、阻止传播、取消默认事件、事件代理

事件传播机制

事件传播机制分为三个阶段

事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。(ie低版本没有捕获）
事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数.
冒泡传播：从捕获到事件源的元素开始往父级元素进行事件冒泡，DOM0级事件中，事件绑定函数的触发都发生在冒泡阶段

阻止传播

stopPropagation()取消事件进一步捕获或冒泡

阻止默认事件

preventDefault()取消事件默认行为

什么是事件默认行为?
- a链接默认跳转
- type =submit默认提交表单
- 其他浏览器默认行为...

我们不希望浏览器默认做什么事情,我们就给它绑定事件,怎么绑定呢?preventDefault()

<a href="http://baid.com">baidu</a>
<script>
  document.querySelector('a').onclick= function(e){
    //阻止默认事件
    e.preventDefault()
    //点击时打印链接
    console.log(this.href)
    if(/baidu.com/.test(this.href)){
      location.href = this.href
    }
  }
</script>

<form action="/login">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    document.querySelector('form').addEventListener('submit', function(evt){
       //阻止默认事件
        evt.preventDefault()
        if(document.querySelector('input[name=username]').value === 'jirengu'){
            this.submit()
        }
    })
</script>

事件代理

要理解事件代理,首先要明白什么是事件冒泡:当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。

<ul id="oul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
(function(){
    var oUl=document.getElementById("oul");
    oUl.addEventListener('click',show,false);
    function show(e) {
        var targetElement=e.target||e.srcElement;
        if(targetElement.nodeName.toLowerCase()==="li"){
        alert(targetElement.innerHTML);
        }
    }
})();
</script>

看上面的这个例子,我把click事件绑定在了父元素ul上,而不是li上,于是，当我点击任何一个li标签（不管是动态生成的还是之前就有的）是，这个事件就像泡泡一样，冒啊冒。由于我这里给ul绑定了onlick，那么这时，ul会捕获冒泡上来的onclick事件。

我们来看一下事件代理的步骤:

父元素绑定事件
父元素知道事件的实际发生目标是谁
我们要对目标进行判断，如果是我们需要的元素，则发生回调函数

事件代理的优点:

性能不小心得到了优化
动态添加的元素也能绑定事件了

写一个 Demo，演示事件传播的过程，演示阻止传播的效果

阻止事件传播

//html
<body>
  <style>
    .container,
    .box,
    .target{
      border: 1px solid;
      padding: 10px;
    }  
  </style>
  <button id="btn">click</button>
  
  <div class="container">
    container
    <div class="box">
      box
      <div class="target">target</div>
    </div>
  </div>
</body>

//js

function $(selector){
  return document.querySelector(selector)
}
var btn = $('#btn')
btn.onclick = function (e){
 console.log(e) 
}
btn.addEventListener('click', function(evt){
  console.log(this)
  console.log(btn)
  console.log(evt.target)
})

$('.container').addEventListener('click', function(e){
  console.log('contianer click.. in 捕获阶段')
}, true)
$('.box').addEventListener('click', function(e){
  //e.stopPropagation() //阻止传播
  console.log('box click.. in 捕获阶段')
}, true)
$('.target').addEventListener('click', function(e){
  console.log('target click.. in 捕获阶段')
}, true)

$('.container').addEventListener('click', function(e){
  console.log('contianer click.. in 冒泡阶段')
}, false)
$('.box').addEventListener('click', function(e){
  //e.stopPropagation()  //阻止传播
  console.log('box click.. in 冒泡阶段')
}, false)
$('.target').addEventListener('click', function(e){
  console.log('target click.. in 冒泡阶段')
}, false)