第25章 事件冒泡捕获阻止默认

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

<style>
  .container,
  .box,
  .target{
    border: 1px solid;
    padding: 20px;
  }
</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.addEventListener('click',function(evt){
  console.log(evt.target)
})

$('.container').addEventListener('click',function(e){
  console.log('container click in 捕获阶段')
},true)
$('.box').addEventListener('click',function(e){
  // e.stopPropagation()
  // 在此处添加 e.stopPropagation()则捕获阶段止于 box 捕获阶段 ,后面的捕获阶段和冒泡都不在进行了
  console.log('box click in 捕获阶段')
},true)
$('.target').addEventListener('click',function(e){
  console.log('target click in 捕获阶段')
},true)

$('.container').addEventListener('click',function(e){
  console.log('container click in 冒泡阶段')
},false)
$('.box').addEventListener('click',function(e){
  // e.stopPropagation()
  // 在此处添加 e.stopPropagation()则冒泡阶段止于 box 而不再向上出现"container click in 冒泡阶段"
  console.log('box click in 冒泡阶段')
},false)
$('.target').addEventListener('click',function(e){
  console.log('target click in 冒泡阶段')
},false)
</script>

阻止默认事件

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

preventDefault() Function 只读 取消事件默认行为。取消点击a连接的默认跳转行为。阻止输入的上传，在输入框校验正解时才上传。