JavaScript DOM事件(行内事件、L0L1、L2L3事件)

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就是哪个元素