搞懂事件基础

事件

1. 事件基础

1-1 什么是事件？

在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件，比如用户的单击行为、表单内容的改变行为即为事件，我们可以为不同的事件定义处理程序。

JS 使用异步事件驱动的形式管理事件

• 事件类型：JS 为不同的事件定义的类型，也可以称为事件名称，有鼠标，指针，键盘，表单，用于界面，用户界面等事件类型

• 事件目标：事件目标指产生事件的对象，比如 a 标签被点击那么 a 标签就是事件目标。元素是可以嵌套的，所以在进行一次点击行为时可能会触发多个事件目标

• 事件处理程序：事件意味着用户或者浏览器执行某种动作，为响应事件而调用的函数被称作为事件处理程序或者事件监听器。在发生用户行为触发事件时就会执行定义的事件处理程序

1-2 HTML 事件处理程序

事件处理程序可以设置在 HTML 元素，名为 on<event> 的特性 attribute 中，浏览器解析后会绑定到 DOM 属性中

<button onclick="console.log('点击事件')">触发点击事件</button>

• 使用函数或者对象方法作为 HTML 事件处理程序

<button onclick="handle()">函数处理</button>
<button onclick="obj.handClick()">对象方法处理</button>

<script>
    // 绑定事件，通过定义函数处理
    function handle() {
     
        console.log('函数处理')
    }

    // 绑定事件，通过对象中方法处理
    let obj = {
     
        handClick() {
     
            console.log('对象方法处理')
        }
    }
</script>

1-3 DOM 事件处理程序

事件处理程序可以设置在 DOM 对象上，名为 on<event> 的属性 property 中

• 不要对事件处理程序使用 setAttribute 方法，会将函数转换为字符串
• 函数应该是以 sayThanks 的形式进行赋值，而不是 sayThanks()
• 无法为事件类型绑定多个事件处理程序，后面会覆盖前面定义的事件处理程序

<button class="btn" onclick="console.log('html绑定')">DOM事件处理程序</button>

<script>
    // 通过dom对象上设置事件处理对象
    let elem = document.querySelector('.btn');
    elem.onclick = function() {
     
        console.log('dom绑定')
    }
    elem.onclick = function() {
     
        console.log('dom绑定2')
    }
    // 不要对事件处理程序使用setAttribute方法
    elem.setAttribute('onclick', `console.log('setAttribute')`)
    
    // 函数赋值形式
    function sayThanks() {
     
        console.log('sayThanks')
    }

    elem.onclick = sayThanks();
    // 这种方式是错误的，sayThanks()作为函数调用了
</script>

1-4 事件处理程序中的 this

处理程序中的 this 的值是对应的元素，就是处理程序所在的那个元素

<button class="btn">this指向</button>

<script>
    let elem = document.querySelector('.btn');
    elem.onclick = function (e) {
     
        console.log(this);
        console.log(event.target)
        // <button class="btn">this指向</button>
        // this指向绑定事件处理程序的对象
    }
</script>

2. 事件监听

2-1 addEventListener

element.addEventListener(event, handler, options)

事件监听函数 addEventListener 可以对同一事件类型设置多个事件处理程序，按设置的顺序先后执行

• event 事件类型
• handler 处理程序
• option 指定有关处理程序属性的可选参数对象

<button class="btn">绑定多个事件</button>

<script>
    // elem.addEventListener(event, handler, options)
    // 可以绑定多个事件处理程序
    // event为事件类型，handler事件处理程序,options处理程序属性
    let elem = document.querySelector('.btn');
    elem.addEventListener('click',function(e) {
     
        console.log('触发1')
    })
    // 都会触发
    elem.addEventListener('click',function(e) {
     
        console.log('触发2')
    })
</script>

2-2 事件监听 options 参数

addEventListener 的第三个参数为定制的选项，可传递 object 或 boolean 类型

Tips： addEventListener 的第三个参数传递 true/false 和设置 {capture:true/false} 是一样

• capture：Boolean 类型
  • true 表示处理程序 handler 会在该类型的事件捕获阶段传播到该 EventTarget 时触发，
  • false 表示处理程序 handler 会在该类型的事件冒泡阶段执行

<div class="container">
    <button class="btn1">capture:true</button>
</div>

<div class="container2">
    <button class="btn2">capture:false</button>
</div>

<script>
    // capture: true 捕获阶段执行
    let container = document.querySelector('.container');
    let btn1 = document.querySelector('.btn1');
    container.addEventListener('click',function() {
     
        console.log('container 捕获执行')
    }, {
     capture: true});

    btn1.addEventListener('click',function() {
     
        console.log('btn1 捕获执行'