1. JavaScript 基础

  2. 深入数据和类型

  3. 函数进阶

  4. 运算符

  5. 浏览器存储

  6. Document

  7. Web API

  8. 事件

  9. 工具与规范

  10. 实例

  11. 练习

事件是能够响应用户操作或某个阶段(例如页面载入、视频暂停等)而不可或缺的一个机制。

常用事件

常用的事件有以下这些:

鼠标事件:

鼠标事件的事件类型统一为 MouseEvent

键盘事件:

键盘事件的事件类型统一为 KeyboardEvent

Window 事件:

事件类型为 Event

  • load:页面加载完成。

绑定事件

我们必须将我们的函数绑定到事件上,才能让事件在触发时执行你的代码。

绑定事件则有以下几种方法。

HTML 属性

在写一个 HTML 元素时, 就可以通过 on<event> 的属性给其绑定一段代码,这段代码将在事件触发时执行。

$$edit$$
<button onclick="alert('你好')">问候</button>

$$demo

<button onclick="alert('你好')">问候</button>

$$

在代码很多时直接写在属性中也不现实,也可以事先声明一个函数,然后在属性中调用。

$$edit$$
<button onclick="greet()">问候</button>
<script>
    function greet() {
        alert("你好")
        alert("我好")
        alert("大家好")
    }
</script>

$$demo

<button onclick="greet()">问候</button> <script> function greet() { alert("你好") alert("我好") alert("大家好") } </script>

$$

DOM 属性

我们也可以在 JavaScript 代码中通过 DOM 属性来绑定一个事件函数。

$$edit$$
<button id="btn">问候</button>
<script>
    btn.onclick = function () {
        alert("你好")
        alert("我好")
        alert("大家好")
    }
</script>

$$demo

<button id="btn">问候</button> <script> btn.onclick = function () { alert("你好") alert("我好") alert("大家好") } </script>

$$

清除绑定

不管是清除 HTML 属性还是 DOM 属性上的绑定,只需要将 DOM 属性上的 onclick 赋值为 null 或 undefined 即可。

$$edit$$
<button id="btn" onclick="alert(`你好`)">问候</button>
<script>
    // 清除绑定
    btn.onclick = null
</script>

$$demo

<button id="btn" onclick="alert(你好)">问候</button> <script> // 清除绑定 btn.onclick = null </script

$$

addEventListener

以上方法一次只能绑定一个函数,当我们有多个函数的绑定需求时就比较麻烦了。如果赋值多个函数,那么后面的函数会覆盖之前的。

$$edit$$
<button id="btn">问候</button>
<script>
    btn.onclick = function () {
        // 这个被覆盖
        alert("你好")
    }

    btn.onclick = function () {
        // 这个会执行
        alert("大家好")
    }
</script>

$$demo

<button id="btn">问候</button> <script> btn.onclick = function () { // 这个被覆盖 alert("你好") }

btn.onclick = function () {
    // 这个会执行
    alert("大家好")
}

</script>

$$

而有两个方法可以处理这个问题:

addEventListener 的语法如下:

target.addEventListener(type, listener[, options])
  • type:要绑定的事件类型。
  • listener:处理函数。
  • options:较少用到,详情可看 MDN 的文档。

以下代码中我们绑定了两个函数,都可以被执行。

$$edit$$
<button id="btn">问候</button>
<script>
    btn.addEventListener("click", () => {
        alert("你好")
    })

    btn.addEventListener("click", () => {
        alert("大家好")
    })
</script>

$$demo

<button id="btn">问候</button> <script> btn.addEventListener("click", () => { alert("你好") })

btn.addEventListener("click", () => {
    alert("大家好")
})

</script>

$$

清除绑定

removeEventListener 的语法很是相似:

target.removeEventListener(type, listener[, options])
  • type:要清除的事件类型。
  • listener:要清除的函数。
  • options:较少用到,详情可看 MDN 的文档。

$$tip

清除的函数必须是同一个对象,不然不起作用。

$$edit$$
<button id="btn">问候</button>
<script>
    btn.addEventListener("click", () => {
        alert("你好")
    })

    // 不起作用
    btn.removeEventListener("click", () => {
        alert("你好")
    })
</script>

$$

正确写法应该像下面一样, 绑定与清除都是同一个函数对象:

$$edit$$
<button id="btn">问候</button>
<script>
    function greet() {
        alert("你好")
    }

    btn.addEventListener("click", greet)
    btn.removeEventListener("click", greet)
</script>

$$demo

<button id="btn">问候</button> <script> function greet() { alert("你好") }

btn.addEventListener("click", greet)
btn.removeEventListener("click", greet)

</script>

$$

this 指向

在事件绑定的处理代码中, this 指向的是元素自身。

$$edit$$
<!-- 以下按钮提示的都是自身的文本内容,说明 this 指向的是自身 -->
<button onclick="alert(this.textContent)">HTML 属性绑定</button>
<button id="btn">DOM 属性绑定</button>
<button id="btn2">addEventListener 绑定</button>
<script>
    function greet() {
        alert(this.textContent)
    }

    btn.onclick = greet
    btn2.addEventListener("click", greet)
</script>

$$demo

<button onclick="alert(this.textContent)">HTML 属性绑定</button> <button id="btn">DOM 属性绑定</button> <button id="btn2">addEventListener 绑定</button> <script> function greet() { alert(this.textContent) }

btn.onclick = greet
btn2.addEventListener("click", greet)

</script>

$$

事件对象

在事件触发时, 浏览器会创建一个 event 对象将其作为参数传递给绑定的函数。

不同事件接收的事件类型可能会有所不同,但所有事件都继承自 Event 对象,所以 Event 对象中的属性与方法是所有对象共有的。

$$edit$$
<button id="btn">问候</button>
<script>
    function greet(event) {
        console.log(`事件的类型:${event.type}`) // click
        console.log(event.currentTarget) // 事件绑定的元素
        console.log(event.currentTarget === this) // true
    }

    btn.onclick = greet
</script>

$$demo

<button id="btn">问候</button> <script> function greet(event) { console.log(事件的类型:${event.type}) // click console.log(event.currentTarget) // 事件绑定的元素 console.log(event.currentTarget === this) // true }

btn.onclick = greet

</script>

$$