onclick和addEventListener('click', function() {})

xxx.onclick = function() {}只能给元素绑定一个onclick事件

xxx.addEventListener('click', function() {})可以给添加多个click事件,每添加一个, 都会进入队列里, 然后依次执行, 可以用xxx.removeEventListener('click', function() {}) 取消click队列, 每种事件有各自不同的队列

我们可以设置一次事件监听

function f1() {
  console,log(1)
xxx.removeEventListener('click', f1)
}

xxx.addEventListener('click', f1)

当我们点击一次元素后, 此监听事件就被取消了

这两点对于其他事件同样适用

事件捕获和事件冒泡

当点击一个元素触发事件时. 事件会先从元素的最外层父元素一层一层进入到触发的元素, 然后在从触发元素一层一层返回到最外层父元素, 从最外层一层一层进入的阶段叫事件捕获阶段, 从最里层一层一层往外的阶段叫事件冒泡,

这里有一个模拟事件点击全过程的动画

我们这里利用事件冒泡写出一个点开浮层、关闭浮层的例子，来让大家更好的理解事件模型, 要求

点击按钮弹出浮层
点击别处关闭浮层
点击浮层时，浮层不得关闭
再次点击按钮，浮层消失

思路

对button添加click事件, 通过点击button, 来切换浮层显示或者关闭
给document设置监听click来关闭浮层, document是最上层的元素, 由于事件冒泡, 我们点击document的任意子元素, 都会冒泡到document, 触发document的click事件, 达到点击任意地方关闭浮层的效果

要点

由于事件冒泡, 我们点击document的任意子元素都可以将点击事件冒泡到document, 我们通过给document添加click事件来监听来自他所有子元素的click事件, 这样就可以达到点击屏幕任何地方都可以关闭浮层的效果
利用stopPropagation()来阻止事件冒泡, 这样我们就可以通过对浮层的上一层父元素应用stopPropagation()来阻止浮层的click事件传递到document, 这样我们点击浮层的时候, 浮层就不会关闭了
事件冒泡发生在事件绑定的函数运行完之后, 这就意味着如果我们在点击button时, 在button绑定的事件函数运行完之后, 才会发生事件冒泡, 这也就意味着, 我们如果在button绑定的事件函数中对document设置监听click事件, 那么由于事件冒泡, 这个事件仍然会被触发, 所以如果我们要在button点击事件中监听document, 我们可以通过异步的方法, 在事件冒泡完成后, 再设置document的监听, 这里可以用setTImeout来异步设置document监听

demo