jQuery event.target

admin發表於2017-02-20
jQuery
此屬性用來返回觸發事件的DOM元素。

可以通過比較event.target和this來確定事件是不是由於事件冒泡而觸發。

經常用於事件委託。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
event.target

jQuery1.0版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
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").on("click",function(ev){
    var target = ev.target;
    $target=$(target);
    if($target.is("td")) {
      $target.text('螞蟻部落');
    }
  })
})
</script>
</head>
<body>
<table cellspacing="1">
  <tr>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
  </tr>
  <tr>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
  </tr>
</table>
</body>
</html>

如果點選的是單元格，那麼就重置單元格中的文字。

相關文章