事件监听-语法

事件监听

事件的三要素：事件源、事件类型、事件回调。

事件源：需要进行事件监听的dom对象

事件类型：触发事件的用户行为，比如：用户点击onclick、用户输入oninput等。

事件回调：当事件被触发的时的一个函数。

在对事件源添加事件监听时有两种方法：

方法一：事件源.事件类型=事件回调

btn.onclick=function(){}

方法二：事件源.addEventListener（事件类型，事件回调）

//onclick中的on是固定的前缀，比如onmouseover、oninput，真正的事件类型是click
btn.addEventListener('click',function(){})
//如果把一个函数当成参数传给了另外一个函数，这个里面的function(){}是回调函数。

//里面输出了this,那么this指向谁？
btn.addEventListener('click',function(){
  //this指向的是事件源-btn
  //事件回调函数中的this始终指向事件源
  consloe.log(this)
})

在事件回调函数中，固定的指向事件源，无论是方法一还是方法二this指向的都是事件源。

方法一是之前老的用法，方法二是相对新的语法。推荐用方法二。

两种方法之间的区别：

<div class="box"></div>
let box = document.querySelector('.box')

//使用方法一

box.onclick=function () {
  console.log("方法一点击")
}
box.onclick=function () {
  console.log("方法一又被点击")
}
//上述相等于：
let a = 1
a = 2
console.log(a)//a等于几？

//上述添加事件的方法，实际上是在进行赋值的运算，因此重复赋值后，最后一次会将前面的给覆盖掉。

//使用方法二

box.addEventListener('click',function(){
  console.log('方法二点击')
})
box.addEventListener('click',function(){
  console.log('方法二又被点击')
})

//使用方法二添加事件监听时，允许相同事件类型的事件重复被监听。