SOURCE

// var a = document.getElementsByTagName('div')
// var b = document.querySelectorAll('div')
// // console.log(a)
// // console.log(b)

// var c = document.createElement('div')

// document.body.appendChild(c)

// // console.log(a)
// // console.log(b)

// var bb = document.querySelector('.b')
// console.log(bb.nextElementSibling)

// 事件委托
let container = document.querySelector('.container')
container.addEventListener('click', _debounce((e) => {
  // console.log(e.target.nodeName === 'DIV')
    if (e.target.nodeName === 'DIV') {
      console.log(e.target.innerText)
    }
}))

function _throttle (fn, interval = 500) {
  let canrun = true
  return function () {
    if (!canrun) return
    canrun = false
    setTimeout(() => {
      console.log(this === container)
      fn.apply(this, arguments)
      canrun = true
    }, interval)
  }
}

function _debounce (fn, interval=2000) {
  let time = null
  return function () {
		window.clearTimeout(time)
    time = setTimeout(() => {
			fn.apply(this, arguments)
    }, interval)
  }
}

<div class="container">
  <p>66666</p>
  <div class="a">11</div>22
  <div class="b">33</div>44
  <div class="c">55</div>66
</div>
<div class="next"></div>

.container {
  width: 600px;
  /* height: 300px; */
  background: rgba(0,0,0,.2);
  /* float: left; */
  /* overflow: auto; */
  display: inline-block;
  /* display: flex; */
  /* overflow: hidden; */
}
.container::after {
/*   content: '';
  clear: both;
  display: block; */
}
.a {
  width: 50px;
  height:100px;
  background: #000;
  float: left;
  display: inline-block;
}
.b {
  width: 80px;
  height:100px;
  background: #666;
  float: left;
  display:inline-block;
}
.c {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
  display:inline-block;
}
.next {
  widht: 50px;
  height: 50px;
  background: blue;
}