如何在JavaScript中获取事件目标的默认值？

最近我在做一个带可编辑div的表格功能时，碰到了一个小问题：想要获取可编辑div的初始默认值，但是用event.target.defaultValue的时候一直返回undefined，不过编辑后的文本内容倒是能通过textContent正常获取到。

初始实现代码 #

HTML表格结构 #

<table class="data table-bordered table table-striped" id="ui" method="POST"> 
  <tr style="background-color:blue;color:white;"> 
    <td width="25%">Device-imei</td> 
    <td>Device-Model</td> 
    <td>device-nickname</td> 
  </tr> 
  <tr> 
    <td>"111111"</td> 
    <td>"Model"</td> 
    <td> 
      <div class="device-name" contenteditable>"Name"</div> 
    </td> 
  </tr> 
  <tr> 
    <td>"11121341"</td> 
    <td>"asdf"</td> 
    <td> 
      <div class="device-name" contenteditable>"Name"</div> 
    </td> 
  </tr> 
</table>

对应的JavaScript逻辑 #

$('.device-name').on('blur', function(event) { 
  alert(event.target.defaultValue); 
  alert(event.target.textContent); 
});

问题根源 #

后来我才反应过来，defaultValue是input、textarea这类表单控件专属的属性，用来存储它们的初始值。而我们这里用的是普通的div元素，它本身根本没有这个属性，所以调用event.target.defaultValue肯定会返回undefined。

解决方法：自定义data属性存储初始值 #

既然div没有默认的初始值存储属性，那我们就自己加一个！给每个可编辑的div添加data-value属性，把初始默认值存在里面，然后用getAttribute('data-value')来读取这个值就可以了。

修改后的HTML代码 #

<table class="data table-bordered table table-striped" id="ui" method="POST"> 
  <tr style="background-color:blue;color:white;"> 
    <td width="25%">Device-imei</td> 
    <td>Device-Model</td> 
    <td>device-nickname</td> 
  </tr> 
  <tr> 
    <td>"111111"</td> 
    <td>"Model"</td> 
    <td> 
      <div class="device-name" contenteditable data-value="Name">"Name"</div> 
    </td> 
  </tr> 
  <tr> 
    <td>"11121341"</td> 
    <td>"asdf"</td> 
    <td> 
      <div class="device-name" contenteditable data-value="Name">"Name"</div> 
    </td> 
  </tr> 
</table>

修改后的JavaScript代码 #

$('.device-name').on('blur', function(event){ 
  alert(event.target.getAttribute('data-value')); 
  alert(event.target.textContent); 
})

这样调整之后，就能同时拿到初始的默认值和用户编辑后的内容了，完美解决了这个问题！

内容的提问来源于stack exchange，提问作者TakoHero