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

全部開發者教程

JavaScript 入門教程

然冬 · 更新于 2020-04-09

DOM 事件綁定

DOM 提供了許多事件供開發者進行綁定，以響應各種操作，豐富頁面交互。

想要觸發事件，就得先給 DOM 節點綁定事件，提供事件處理器。

1. 直接在 HTML 上提供事件

這種方式是將事件內聯在 HTML 代碼中。

實例演示
預覽 復制
復制成功！
<style>
  .box {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<div class="box" onclick="alert('耶耶耶耶耶！')"></div>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

通過設置 HTML 的 onclick 屬性，可以綁定點擊事件，屬性內可以寫簡單的 JavaScript 代碼。

但是可以看到這種方式是有局限性的，寫大量的 JavaScript 代碼在里面肯定是不合理的。

過去網頁的交互相對較少，會在 body 標簽上綁定 onload 事件，即頁面加載完畢后做的事情。

實例演示
預覽 復制
復制成功！
<script>
  function load() {
    alert('頁面加載完畢啦！');
  }
</script>
<body onload="load()">
  <div>我是一段濫竽充數文案。</div>
</body>
運行案例 點擊 "運行案例" 可查看在線運行效果

onload="load()" 即表示在頁面加載完成后，執行 load 函數?，F在翻閱部分文獻，依然能夠看到這種寫法。

2. 設置事件處理器屬性

通過事件處理器屬性設置綁定事件，需要先獲取到 DOM 節點。

實例演示
預覽 復制
復制成功！
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 22px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
</style>

<button class="btn">
  我是一個可以改變一切的按鈕
</button>

<script>
  var btn = document.querySelector('.btn');

  btn.onclick = function() {
    var text = btn.innerText;

    btn.innerText = text.replace('一切', '世界');
  };
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

通過 onclick 就可以設置按鈕的點擊事件。

如果需要清除事件，可以重新將屬性重新設置為 null。

實例演示
預覽 復制
復制成功！
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
  
  p {
    font-size: 22px;
  }
</style>


<button class="btn">
  我是一個可以改變一切的按鈕
</button>

<p>1</p>

<script>
  var btn = document.querySelector('.btn');
  var p = document.querySelector('p');
  var total = 1;

  btn.onclick = function() {
    p.innerText = ++total;

    if (total >= 5) {
      btn.onclick = null;
    }
  };
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

這種綁定事件的方式依然常用，各種文獻的 demo 也會采用這種方式，但缺點是同一個事件在沒有其他輔助條件下，只能綁定一個事件處理器。

3. 使用 element.addEventListener 綁定事件

使用 DOM 節點的 addEventListener 方法也可以綁定事件。

實例演示
預覽 復制
復制成功！
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }

  input {
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
  }
  
  p {
    font-size: 22px;
  }
</style>


<input type="text">

<button class="btn">
  按鈕
</button>

<p>1</p>

<script>
  var btn = document.querySelector('.btn');
  var input = document.querySelector('input');
  var p = document.querySelector('p');

  var total = 1;

  btn.addEventListener('click', function() {
    input.value = input.value.split('').reverse().join('');
    btn.value = input.value;
    p.innerText = input.value;
  });

  input.addEventListener('keyup', function() {
    btn.innerText = input.value;
  });
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

addEventListener 的第一個參數是事件類型，和使用事件處理器屬性與HTML內聯事件不同，這個方法的事件類型不需要 on 前綴。

第二個參數就是事件處理器，即觸發事件時要做的事情。

使用 addEventListener 可以綁定多個事件處理器。

實例演示
預覽 復制
復制成功！
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
</style>

<button class="btn">
  按鈕
</button>
<p></p>

<script>
  var btn = document.querySelector('.btn');
  var p = document.querySelector('p');
  var total = 1;

  btn.addEventListener('click', function() {
    btn.innerText = ++total;
  });

  btn.addEventListener('click', function() {
    p.innerText = total;
  });
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

一個事件綁定多個事件處理器，其執行順序是按照綁定順序來的。

如果需要去除事件，可以使用 removeEventListener 方法。

實例演示
預覽 復制
復制成功！
<style>
  .btn {
    border: 1px solid #4caf50;
    font-size: 14px;
    padding: 8px 12px;
    color: #4caf50;
    outline: none;
  }
  .btn:active {
    background: #eee;
  }
</style>

<button class="btn">
  按鈕
</button>

<script>
  var btn = document.querySelector('.btn');
  var total = 1;

  function fn() {
    btn.innerText = ++total;

    if (total > 5) {
      btn.removeEventListener('click', fn);
    }
  }

  btn.addEventListener('click', fn);
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

使用 removeEventListener 去除事件，需要傳遞指定的事件，且事件處理器必須與綁定事件傳入的一樣，為同一個。

addEventListener 與 removeEventListener 還具有第三個參數，會在事件流章節進行討論。

IE8及以下都不支持該方法，需要使用IE提供的 attachEvent 與 detachEvent 來處理事件

4. DOM 事件級別

目前常討論的 DOM 級別有 4 級，為 DOM 0級 至 DOM 3級，這里的級可以理解成標準的版本。

這 4 級內容中， DOM 1級沒有提供事件相關的內容，所以不會拿來討論，因此 DOM 事件就被分為了常說的 DOM 0級事件、DOM 2級事件、DOM 3級事件。

  • DOM 0級 提供的事件綁定方式為在HTML 上內聯事件與事件處理器屬性。
  • DOM 2級 提供了 addEventListener 與 removeEventListener 方法。
  • DOM 3級 則是在 2 級的基礎上進行了擴充，添加了更多的事件類型。

事實上 DOM 0級事件并不是標準中的，在 W3C 制定 DOM 標準前，部分瀏覽器已經有了 DOM 模型，也有自己相應的事件，這些出現在標準第一個版本之前的，就被稱為了 DOM 0。

5. 小結

綁定 DOM 事件可以通過以下三種方式：

  1. 將事件內聯在 HTML 中
  2. 使用 事件處理器屬性 綁定事件
  3. 使用 addEventListener 與 removeEventListener 處理事件

前兩種方式不能綁定多個事件處理器，三種綁定方式由不同版本的 DOM 標準提供，通常使用 DOM 級別進行區分。