亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

全部開發者教程

JavaScript 入門教程

然冬 · 更新于 2020-04-07

DOM 與事件

事件是您在編程時系統內發生的動作或者發生的事情，系統通過它來告訴您在您愿意的情況下您可以以某種方式對它做出回應。例如：如果您在網頁上單擊一個按鈕，您可能想通過顯示一個信息框來響應這個動作。在這篇文章中我們將圍繞事件討論一些重要的概念，并且觀察它們在瀏覽器上是怎么工作的。這篇文章并不做徹底的研究僅聚焦于您現階段需要掌握的知識?！?MDN

事件即某個情況、某個事情。

  • 當按鈕被點擊
  • 視頻播放、暫停
  • 關閉瀏覽器
  • 頁面加載完畢
  • 調整瀏覽器窗口大小

上述情況都是事件。

1. DOM 事件

DOM 事件被發送用于通知代碼相關的事情已經發生了。每個事件都是繼承自Event 類的對象，可以包括自定義的成員屬性及函數用于獲取事件發生時相關的更多信息。事件可以表示從基本用戶交互到渲染模型中發生的事件的自動通知的所有內容?！?MDN

DOM 事件是指給 DOM 節點在觸發某個條件下要做的事情，如：當按鈕被點擊的時候改變背景色。

實例演示
預覽 復制
復制成功！
<style>
  .change-bg {
    border: 1px solid black;
    height: 40px;
    width: 120px;
    border-radius: 2px;
    margin-top: 16px;
    outline: none;
    cursor: pointer;
  }

  .change-bg:active {
    background: #efefef;
  }

  .box {
    width: 120px;
    height: 120px;
    background: #4caf50;
    border-radius: 60px;
  }
</style>
<div class="box"></div>

<button class="change-bg">戳這里改變背景色</button>
<script>
  var boxEle = document.querySelector('.box');
  var btnEle = document.querySelector('.change-bg');

  // 隨機生成一個顏色 具體實現可以不管
  function getColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
  }

  btnEle.onclick = function() {
    boxEle.style.backgroundColor = getColor();
  };
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

如上述例子中按鈕的 onclick 屬性，當他被賦值一個函數的時，這個函數就會在按鈕被點擊的時候觸發。

onclick 屬性是一種事件處理器屬性，表示單擊或點擊事件，當想指定按鈕在被點擊的時候要做的事情時，就可以給這個屬性賦值。

賦值的函數通常被稱為事件處理器，即事件被觸發時候時候執行的代碼塊，部分文獻中會稱為事件處理程序。

通常給 DOM 節點設置事件的操作，會被稱為綁定事件，上述例子就是給一個按鈕綁定了點擊事件。

絕大部分事件處理器屬性都是以 on 開頭的。

2. JavaScript 與 DOM 事件

DOM 事件是由DOM標準提供規范，瀏覽器對其進行具體實現的。綁定事件需要借助 DOM 提供的接口，然后由 JavaScript 提供事件處理器。

使用 JavaScript 來給 DOM 節點綁定事件有多種方式，都是由 DOM事件標準 提供的，具體可以參閱事件綁定章節。

3. 小結

事件可以理解為某個情況，如點擊的時候、關閉的時候。這些情況下要做的事情，就是事件處理器（事件處理程序）。

DOM 事件是由 DOM 標準預先定義好的接口，由 JavaScript 提供事件處理器，來決定當事件被觸發時要做的事情。