2021-04-06 -- js-事件捕获冒泡

target.addEventListener()

问题描述：
在页面中手动打开一个模态框（选人控件），在点击控件之外需要让此模态框隐藏。手动在模态框父级页面通过addEventlistener添加了click事件的监听，如果点击了模态框外部则关闭窗口。
大部分情况都是可行的，但是在窗口打开的情况下，直接点击页面中element的input框，模态框没有监听到click事件，没有关闭。

问题分析：猜测，element的focus事件阻止了click事件的冒泡，导致在父级页面没有办法监听的click事件。

问题解决：

1. 解决1：通过mousedown事件进行监听
2. 解决2：addEventListener中第三个参数选择true，在捕获阶段监听事件。

包含知识点：事件的捕获自顶向下，冒泡自底向上。在addEventListener中，除了事件类型和回调函数之外还有第三个参数，布尔类型用来判断是否为捕获阶段获取事件。

延伸知识点：

1. 添加事件的方式：

a.HTML方式，直接在HTML标签中绑定事件（HTML事件处理）

<button onclick="alert(1)"> </button>

或者

<button onclick="doSomething()"> </button>
<script>
doSomething(){
  alert(1)
}
</script>

b.DOM0级事件处理

<button id="btn"> </button>
<script>
   let btn = document.getElementById('btn')
  btn.onClick=function (){
  alert(1)
}
</script>

c. DOM2级事件处理

<button id="btn"> </button>
<script>
   let btn = document.getElementById('btn')
   btn.addEventListener('click',function(){
        alert(1)
  },useCapture)
</script>

focus 和 blur事件不冒泡

可以使用focusin，是focus的冒泡版
focusout，是blur的通用版

dbclick点击事件完整执行顺序

a. mousedown
b. mouseup
c. click
d. mousedown
e. mouseup
f. click
g. dbclick

键盘事件

keypress是输入某个文本时触发，已用textInput代替，如果按下一个非字符按键，不会触发keypress事件

e.target 和 e.currentTarget的区别

target是点击的元素，
currentTaget是实际捕获或者冒泡执行到的元素