<input type="text" class="input-here">

<div class="log"></div>

<script>
  var inputEle = document.querySelector('.input-here');
  var logEle = document.querySelector('.log');

  inputEle.onkeydown = function(event) {
    var ele = document.createElement('p');

    ele.innerText = '按下了' + event.keyCode;

    logEle.appendChild(ele);
  }

  inputEle.addEventListener('keyup', function(event) {
    var ele = document.createElement('p');

    ele.innerText = '弹起了' + event.keyCode;

    logEle.appendChild(ele);
  });
</script>

<div class="a">
  我是第节点 a
  <div class="b">
    我是第二个节点 b
    <div class="c">
      我是第三个节点 c
      <div class="d">
        我是第四个节点 d
        <div class="e">
          我是第五个节点 e
          <div class="f">
            我是最里面的元素 f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: px;"></div>

<script>
  var resultEle = document.querySelector('.result');

  document.querySelector('.a').addEventListener('click', function(e) {
    resultEle.innerText = '捕获到的元素类名是' + e.target.className;
  });
</script>

<div class="a">
  我是第节点 a
  <div class="b">
    我是第二个节点 b
    <div class="c">
      我是第三个节点 c
      <div class="d">
        我是第四个节点 d
        <div class="e">
          我是第五个节点 e
          <div class="f">
            我是最里面的元素 f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: px;"></div>

<script>
  var resultEle = document.querySelector('.result');

  document.querySelector('.a').addEventListener('click', function(e) {
    resultEle.innerText = [
      '当前触发事件的元素的类名是：',
      e.currentTarget.className,
      '。当前捕获到的元素类名是：',
      e.target.className,
    ].join('');
  });
</script>

<style>
  .list {
    width: px;
    margin:  auto;
  }

  .list .item {
    width: ;
    border: px dashed #4caf50;
    border-bottom: ;
    border-radius: px;
    padding: px;
  }

  .list .item:last-child {
    border-bottom: px dashed #4caf50;
  }

  .list .item button {
    border-radius: px;
    font-size: px;
    color: #666;
    outline: none;
  }

  .list .item button:active {
    background: #eee;
  }
</style>

<div class="list">
  <div class="item">
    <p>一句简单的介绍。</p>
    <button>点击我这条</button>
  </div>

  <div class="item">
    <p>两句简单的介绍。两句简单的介绍。</p>
    <button>点击我这条</button>
  </div>
</div>

<script>
  var items = document.querySelectorAll('.list .item');
  var btns = document.querySelectorAll('.list .item button');

  items.forEach(function(item) {
    item.addEventListener('click', function() {
      alert('马上进入到详情');
    });
  });

  btns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var parent = btn.parentNode;

      parent.parentNode.removeChild(parent);
    });
  });
</script>

<style>
  .list {
    width: px;
    margin:  auto;
  }

  .list .item {
    width: ;
    border: px dashed #4caf50;
    border-bottom: ;
    border-radius: px;
    padding: px;
  }

  .list .item:last-child {
    border-bottom: px dashed #4caf50;
  }

  .list .item button {
    border-radius: px;
    font-size: px;
    color: #666;
    outline: none;
  }

  .list .item button:active {
    background: #eee;
  }
</style>

<div class="list">
  <div class="item">
    <p>一句简单的介绍。</p>
    <button>点击我这条</button>
  </div>

  <div class="item">
    <p>两句简单的介绍。两句简单的介绍。</p>
    <button>点击我这条</button>
  </div>
</div>

<script>
  var items = document.querySelectorAll('.list .item');
  var btns = document.querySelectorAll('.list .item button');

  items.forEach(function(item) {
    item.addEventListener('click', function() {
      alert('马上进入到详情');
    });
  });

  btns.forEach(function(btn) {
    btn.addEventListener('click', function(e) {
      // 阻止冒泡
      e.stopPropagation();

      var parent = btn.parentNode;

      parent.parentNode.removeChild(parent);
    });
  });
</script>

<a href="https://imooc.com">冲鸭！！前往网！！</a>

<script>
  var aTag = document.querySelector('a');

  aTag.onclick = function(e) {
    e.preventDefault();

    alert('被终止！');
  };
</script>

<div id="ele">
  点我
</div>
<script>
  var ele = document.getElementById('ele');

  ele.onclick = function(e) {
    alert(e); // undefined
    alert(window.event);
  }
</script>