JS事件委托与可编辑元素

Posted 2020-09-08 十万伏特の比卡超

 

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

可编辑方法

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

 1 contenteditable=true 

 

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

JQ：

 1 $(this).replaceWith(‘text‘); 

 

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

 html：

<input type="text" readonly=readonly>

JQ：

1 $(input).removeAttr(‘readonly‘);

 

复习JS属性操作

1  obj.getAttribute(‘contenteditable‘);
2  obj.setAttribute(‘contenteditable‘, ‘true‘);
3  obj.removeAttribute(‘contenteditable‘);

JQ

1    $(this).attr(‘contenteditable‘, ‘true‘)
2    $(this).removeAttr(‘contenteditable‘, ‘true‘)

 

委托事件

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

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

 1 document.onclick = function(event) {
 2     event = event || window.event;
 3     var target = event.target || event.srcElement;
 4     // console.log(target.nodeName)
 5     if (target.nodeName == target.nodeName) {
 6         for (var o = 0; o < len; o++) {
 7             tag[o].removeAttribute(‘contenteditable‘);
 8         }
 9     }
10 };

JQ就更加简单了

1 $(‘table‘).on(‘click‘, ‘tbody td‘, function(e) {
2     $(this).attr(‘contenteditable‘, ‘true‘);
3     $(this).focus();
4     e.stopPropagation();
5 })

 

哪个方便哪个快用哪个！