第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

JavaScript 入門教程

然冬 · 更新于 2020-04-07

DOM 與事件

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

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

  • 當(dāng)按鈕被點擊
  • 視頻播放、暫停
  • 關(guān)閉瀏覽器
  • 頁面加載完畢
  • 調(diào)整瀏覽器窗口大小

上述情況都是事件。

1. DOM 事件

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

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

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<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');

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

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

圖片描述

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

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

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

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

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

2. JavaScript 與 DOM 事件

DOM 事件是由DOM標(biāo)準(zhǔn)提供規(guī)范，瀏覽器對其進行具體實現(xiàn)的。綁定事件需要借助 DOM 提供的接口，然后由 JavaScript 提供事件處理器。

使用 JavaScript 來給 DOM 節(jié)點綁定事件有多種方式，都是由 DOM事件標(biāo)準(zhǔn) 提供的，具體可以參閱事件綁定章節(jié)。

3. 小結(jié)

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

DOM 事件是由 DOM 標(biāo)準(zhǔn)預(yù)先定義好的接口，由 JavaScript 提供事件處理器，來決定當(dāng)事件被觸發(fā)時要做的事情。