JS事件委托与可编辑元素

最近又在搞一些表格的东西，还要每个格子里面可以编辑的。

可编辑方法

第一种是H5的方法 (可以直接把元素变成可编辑)

 contenteditable=true 

第二种方法替换（把内容替换成input然后替换回去）

JQ：

 $(this).replaceWith('text'); 

第三种方法只读（把input的readonly去掉就可以编辑了）

 HTML：

<input type="text" readonly=readonly>

JQ：

$(input).removeAttr('readonly');

复习JS属性操作

 obj.getAttribute('contenteditable');
 obj.setAttribute('contenteditable', 'true');
 obj.removeAttribute('contenteditable');

JQ

   $(this).attr('contenteditable', 'true')
   $(this).removeAttr('contenteditable', 'true')

委托事件

有时会操作大量一样的代码，可以用委托事件，小量代码用委托事件也会有性能上的优化

JS的委托事件（看了半天原来是这么简单）

document.onclick = function(event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    // console.log(target.nodeName)
    if (target.nodeName == target.nodeName) {
        for (var o = 0; o < len; o++) {
            tag[o].removeAttribute('contenteditable');
        }
    }
};

JQ就更加简单了

$('table').on('click', 'tbody td', function(e) {
    $(this).attr('contenteditable', 'true');
    $(this).focus();
    e.stopPropagation();
})

哪个方便哪个快用哪个！