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

1.事件传播机制、

1.事件捕获阶段：事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。(ie低版本没有捕获）

    事件处理阶段：事件到达目标元素,执行目标元素的事件处理函数.
    冒泡传播：从捕获到事件源的元素开始往父级元素进行事件冒泡，DOM0级事件中，事件绑定函数的触发都发生在冒泡阶段

2.阻止传播、
stopPropagation()取消事件进一步捕获或冒泡

3.取消默认事件、
preventDefault()取消事件默认行为
ps: a链接默认跳转；
type = sublime 默认提交
<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>

4.事件代理。
实现原理是利用了浏览器的事件冒泡和事件源（target）。
在js中事件会冒泡到父级节点，所以我们可以在父级节点进行事件代理。

<ul class="container">
<li class="box">box1</li>
<li class="box">box2</li>
<li class="box">box3</li>
</ul>
<script>
function $(selector){
return document.querySelector(selector)
}

$('.container').onclick = function(e){
if(e.target.classList.contains('box')){
console.log(e.target.innerText)
}
}
</script>

事件代理.png

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

<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>

<script>

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)


</script>