如何获取事件目标默认值JavaScript

Question

我需要能够得到我的目标的默认值。但是，它返回undefined，尽管它返回我编辑的文本内容。

表格

<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);
});

编辑找到了一种绕过我的代码的方法，我在div中添加了数据值，并使用getAttribute获取数据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);
})

Answer 1

target属性可以是为事件注册的元素，也可以是事件的后代。将event.target与this进行比较通常是有用的，以便确定事件是否由于事件冒泡而被处理。当事件冒泡时，此属性在事件委托中非常有用。

来源

所以在你的例子中，这和你想做的一样。

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

没有像defaultValue这样的东西

溶液

如果要存储该值，可以将其赋值给元素属性，并使用jQuery函数attr()或data()或javascript函数getAttribute()检索它。

​

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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-default="Name">"Name"</div>
    </td>
  </tr>
  <tr>
    <td>"11121341"</td>
    <td>"asdf"</td>
    <td>
      <div class="device-name" contenteditable data-default="Name">"Name"</div>
    </td>
  </tr>
</table>

​