event对象的学习使用心得

最近在工作中遇到了"复制上一条input的值给当前input/计算input的数值"等关于input.value的需求,经历了各种坑之后,不由得恶补了一次event对象的知识.

关于event的触发行为常用的有:onclick/onchange/onblur/onfocus/onkeydown等
还有常用的属性

image.png

<textarea :id="i+1" @dblclick="copyText($event)" v-model="item.remark" autocomplete="off" validateevent="true" class="el-textarea__inner" rows="2" title="双击复制上一条摘要(需要输入任意按键留存)"></textarea>
                
function copyText (event) {
  console.log(event)
  console.log(event.currentTarget.id)
//  console.log(event.currentTarget.id - 1)
  console.log(event.currentTarget.value)
  event.currentTarget.value = document.getElementById(event.currentTarget.id - 1).value
}

image.png

//计算input内的值,包含了去除千分位的逗号
<input @dblclick="getDCd($event)" v-model="item.d_amount" v-on:blur="changeMoney(item.clientId, 'd')" v-on:keyup="keyupMoney(item.clientId, 'd')" :id="'d_amount_'+item.clientId"  autocomplete="off" style="text-align: end;" type="text" rows="2" validateevent="true" class="moneyinput el-input__inner">
                  
function getDCd (event) {
  console.log(event.currentTarget.value)
  let dsum = document.getElementById('dsum').innerHTML
  let csum = document.getElementById('csum').innerHTML
  dsum = dsum.replace(/,/, '')
  csum = csum.replace(/,/, '')
  event.currentTarget.value = csum - dsum
}