day17 DOM(3)——事件监听

前言

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

• 语法：元素对象.addEvenListener('事件类型',要执行的函数)
• 事件监听三要素：
  • 事件源：哪个dom元素被事件触发，要获取dom元素
  • 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
  • 事件调用的函数：要做什么事

<button>touch</button>
    <script>
        // 事件源：按钮
        // 事件类型：点击鼠标
        // 事件处理程序：弹出对话框
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            alert('hello')
        })
    </script>