元素可编辑：contenteditable="true" ~~~ <div class="editable" contenteditable=true>this is a editable div</div> ~~~ 监听： ``` $('.editable').on('focusin', function() { console.log('focus in') }); $('.editable').on('focusout', function() { console.log('focus out') }); ``` 非jQuery监听 ``` function setChangeListener (div, listener) { div.addEventListener("blur", listener); div.addEventListener("keyup", listener); div.addEventListener("paste", listener); div.addEventListener("copy", listener); div.addEventListener("cut", listener); div.addEventListener("delete", listener); div.addEventListener("mouseup", listener); } var div = document.querySelector("someDiv"); setChangeListener(div, function(event){ console.log(event); }); ``` **高效的监听** ``` $('body').on('focus', '[contenteditable]', function() { const $this = $(this); $this.data('before', $this.html()); }).on('blur keyup paste input', '[contenteditable]', function() { const $this = $(this); if ($this.data('before') !== $this.html()) { $this.data('before', $this.html()); $this.trigger('change'); } }); ``` 监听失焦（vue）—— ~~~ <span contenteditable="true" @blur="editnameSet(index, $event)">{{item.name}}</span> ~~~ 监听实时修改（vue）—— ~~~ <span contenteditable="true" @keyup="editnameSet(index, $event)">{{item.name}}</span> ~~~ 以上两个监听是基于vue.js的，原生同理