javascript - 删除节点的内联事件处理程序/属性

Question

给定一个来自 dom 的 HTML 节点， 我需要删除所有内联事件处理程序/属性，例如:onclick、onmouseover、onmousedown 等。

我知道:

document.getElementById("some_id").attributes

返回所有的属性，我可以去掉一些属性，但是还有一些属性，比如:id、class、name等。

如何区分这两种类型的属性？

解决问题的完全不同的方法也是一种选择。

编辑:我试图只删除内联事件， 并且我还需要在删除之前将它们“保存”到别处，因此不能通过克隆来完全处置

Answer 1

在这里你得到所有的元素属性，创建一个数组，如果任何attribute以on开头，检查for循环。
然后用那个内联事件处理程序的名称/值创建一个对象，推送到array，最后将其从节点中移除:

var el = document.getElementById("button1");
var listOfEvents=[];  
var attributes = [].slice.call(el.attributes);  

for (i = 0; i < attributes.length; i++){
    var att= attributes[i].name; 

   if(att.indexOf("on")===0){

     var eventHandlers={};
     eventHandlers.attribute=attributes[i].name;
     eventHandlers.value=attributes[i].value;
     listOfEvents.push(eventHandlers);
     el.attributes.removeNamedItem(att);             
   }     
} 

检查下方片段

var el = document.getElementById("button1");

var listOfEvents = [];
var attributes = [].slice.call(el.attributes);

for (i = 0; i < attributes.length; i++) {
  var att = attributes[i].name;

  if (att.indexOf("on") === 0) {
    console.log(att);
    var eventHandlers = {};
    eventHandlers.attribute = attributes[i].name;
    eventHandlers.value = attributes[i].value;
    listOfEvents.push(eventHandlers);
    el.attributes.removeNamedItem(att);

  }


}


console.log(listOfEvents);


/* logs   [[object Object] {
  attribute: "onmousedown",
 value: "mouseDown();"
}, [object Object] {
  attribute: "onmouseup",
  value: "mouseUp();"
}, [object Object] {
  attribute: "onclick",
  value: "doSomething(this);"
}] */

<div>
  <input id="button1" type="button" onmousedown="mouseDown();" onmouseup="mouseUp();" onclick="doSomething(this);" value="Click Me" />
</div>