场景：有一个需求，点击表格的每一行，展示出相应的详情弹窗，由于缺少相应的阻止冒泡操作，导致在点击行内按钮事件的时候，同时也出发触发了行的事件；

因为行内按钮的父元素是单元格，而单元格的父元素是行；

最里层子元素接收到事件后，再层层向上传递给父元素；

 单击行触发事件： @row-click="openDetail"

<el-table
   id="out-table"
   style="width: 100%"
   :data="tableData"
   :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
   @row-click="openDetail"
>

解决办法：

在相应的点击事件上加   .native.stop

因为是不是原生标签；而是el，所以.native必须加；

<el-table-column label="操作" width="200">
    <template slot-scope="scope">
    <el-button
        type="text"
        size="medium"
        @click.native.stop="editTable(scope.row)"
        >编辑</el-button
    >
    <el-button
        type="text"
        size="medium"
        @click.native.stop="delTable(scope.row.id)"
        >删除</el-button
    >
    </template>
</el-table-column>

JavaScript事件

什么是JavaScript事件
事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数
如： 你点击了一个按钮 就叫触发了一个事件

事件监听

什么是事件监听

就是让程序检测是否有事件产生 ，一但有事件产生，就立即调用一个函数做出响应
语法： 元素.addEventListener(‘click’,事件触发时调用的回调函数)
语法：
元素.addEventListener(‘事件类型’，事件触发时调用的回调函数)

事件监听的三要素

事件源： 哪个DOM元素被事件触发了，要获取DOM 元素

事件类型： 用什么方式触发 比如鼠标点击 click 鼠标经过mouseover等
事件调用的回调函数：事件触发时调用的函数 要做什么事

行内事件

什么是行内事件？

监听一个元素的事件 ，也可以写在标签内 ，这中写法称之为行内事件

<标签 on事件名='代码'></标签>
<button onclick='alert('我被点击了')'>按钮</button>

行内事件调用函数

<button onclick='fn('我被点击了')'>按钮</button>
function fn () {
	console.log(..)
}

也可以给函数传参 行内的括号内传递的是实参 函数后的括号传递的形参
注意此时函数内内的this指向window

DOM L0 L1事件

DOM L0 指的是 DOM 刚诞生石的版本
语法： 元素.on事件名 = 触发事件时的调用的函数

btn.onclick = function () {
	alert('我被点击了')
}

这种写法就是在事件类型前面固定加on 即是监听此类事件
L0 L1相同的事件只能绑定一次

DOM L1 L2 事件

元素.addEventListener(‘事件类型’，事件触发时调用的回调函数)

btn.addEventListener('click',function () {
	console.log('我被点击了')
})

L2 L3 相同的事件类型可以绑定多次

事件移除

什么是事件移除？

指的是移除监听的事件，可以提升性能

L0 L1 事件移除

元素.on事件名 = null

btn.onclick = null

L1 L2 事件移除

元素.removeEventListener(‘事件类型’，要移除的回调函数)

btn.removeEventListener('click',fn)

注： 如果添加事件监听的时候用的是匿名函数，则无法移除

事件中的this

任何函数内都用this 事件出发时的回调函数也不例外
事件回调函数里的this 指向的是 当前被添加事件监听的DOM元素对象
简单理解 给哪个元素调用的addEventListener / onclick 回调函数 / 函数里面的this就是哪个元素