JS是一门以事件驱动为核心的语言。

事件

事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号(但事件不仅限于 DOM)。
常见事件类型: MDN文档
鼠标事件:

  • onclick —— 当鼠标点击一个元素时。
  • onmouseover / onmouseout —— 当鼠标指针移入/离开一个元素时。
  • onmousedown / onmouseup —— 当在元素上按下/释放鼠标按钮时。
  • onmousemove —— 当鼠标移动时。

表单(form)元素事件

  • onchange —— 当访问者改变域的内容时。
  • onfocus —— 当访问者聚焦于一个元素时,例如聚焦于一个 <input>

键盘事件

  • onkeydownonkeyup —— 当访问者按下然后松开按键时。

Document 事件

  • onload —— 当 HTML 页面加载完成时。

还有很多其他事件。我们将在下一章中详细介绍具体事件。

事件处理程序

为了对事件作出响应,我们可以分配一个 处理程序(handler)—— 一个在事件发生时运行的函数。

处理程序是在发生用户行为(action)时运行 JavaScript 代码的一种方式。

有几种绑定事件处理程序的方式:

行内绑定

<p onclick="alert('hi')">
    hello
</p>
<p onclick="foo()">
    hello
</p>
<script>
    // 标签中不适合编写大量代码,因此我们最好创建一个 JavaScript 函数,然后在事件中调用这个函数。
    function foo(){
        console.log('hi')
    }
</script>

在鼠标点击时,onclick 中的代码就会运行。

属性绑定

ele.onclick

<p>
    click me!
</p>
<script>
    var pEl = document.getElementsByTagName('p')[0];
    pEl.onclick = function() {
        alert('Thank you');
    };
</script>

因为每一个dom只有一个 onclick 属性,所以我们无法分配更多事件处理程序。也就是无法同时绑定多个事件

要移除一个处理程序 —— 赋值 elem.onclick = null

文档更新时间: 2021-12-10 14:07   作者:张老师