DOM事件模型

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