元素可編輯：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的，原生同理