jQuery 事件委託

admin發表於2017-02-10
jQuery事件

所謂事件委託正如其名，自己的事情"委託"給別人做，是利用事件冒泡現象來實現的。

首先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
table {
  width: 300px;
  height: 60px;
  background-color: green;
}
table td {
  background-color: white;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("td").click(function () {
    $(this).text("螞蟻部落");
  })
})
</script>
</head>
<body>
<table cellspacing="1">
  <tr>
    <td>單元格一</td>
    <td>單元格二</td>
    <td>單元格三</td>
    <td>單元格四</td>
  </tr>
  <tr>
    <td>單元格五</td>
    <td>單元格六</td>
    <td>單元格七</td>
    <td>單元格八</td>
  </tr>
</table>
</body>
</html>

為每一個td繫結click事件處理函式，點選單元格的時候，會重新設定單元格中的文字。

看起來非常的完美，其實並非這樣，如果當單元格非常多時候，遍歷單元格和為每一個單元格繫結事件處理函式將會大大降低程式碼的效能，如果讓單元格的父元素監聽事件，只要判斷最初觸發事件的元素是否是td即可。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
table {
  width: 300px;
  height: 60px;
  background-color: green;
}
table td {
  background-color: white;
}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $("table").click(function (ev) {
    var target = ev.target;
    if ($(target).is("td")) {
      $(target).text('螞蟻部落');
    }
  })
})
</script>
</head>
<body>
<table cellspacing="1">
  <tr>
    <td>單元格一</td>
    <td>單元格二</td>
    <td>單元格三</td>
    <td>單元格四</td>
  </tr>
  <tr>
    <td>單元格五</td>
    <td>單元格六</td>
    <td>單元格七</td>
    <td>單元格八</td>
  </tr>
</table>
</body>
</html>

以上程式碼實現了相同的功能，但是效率卻大大提高了；本來td自己要做的事情，交付給table做。

相關文章