js创建事件监听，点击事件监听中对dom操作，滚动事件监听的坑，自定创建类似element-UI的组件

一、事件监听是什么？

同一个 EventTarget 注册了多个相同的 EventListener，那么重复的实例会被抛弃。不需要用 removeEventListener 手动清除多余的EventListener，因为重复的都被自动抛弃了。

W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

语法：

element.addEventListener(event, function, useCapture)
event : （必需）事件名，支持所有 DOM事件 。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

二、使用步骤

1.click点击事件监听

代码如下（示例）：

创建

mounted(){
window.addEventListener('click',(e)=>{
debugger
},false)

删除

destroyed(){
window.removeEventListener('click',(e)=>{
debugger
},false)

2.根据事件监听去创建类似element-UI的组件

代码如下（示例）：
html

<div v-for="(item, index) in selectData" :key="index" class="selectItem">
{{item.name}}--{{item.age}}
</div>

js

data(){
return{
selectData : [
{name:'a',age:12},
{name:'ab',age:1112},
]
mounted(){
window.addEventListener('click',(e)=>{
if(!this.$refs.select.contains(e.target)){
this.selectShow = false
}
},false)

css

.selectItem{
color: black;
font-size: 15px;
text-align: center;
line-height: 25px;
height:25px;
width: 50px;
}
.selectItem:hove{
color: 1890ff;
background: #e6f7ff;
}

3.监听滚动事件的坑

根据我的经验，在overflow：auto和overflow：scroll的div上监听不成功

使用@scroll更方便，对于@scroll的冒泡阶段和捕获阶段用了data中的一个状态改变来区分
html

<div
      id="tree"
      class="current-tree-wrap"
      @scroll="scrollEvent"
      style="height: calc(100vh - 200px); overflow: auto"
    >
</div>

js

if (e.currentTarget.scrollTop + e.currentTarget.clientHeight == e.currentTarget.scrollHeight) {
debugger
}

总结

good morning