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

Question

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

我知道：

document.getElementById("some_id").attributes

返回所有属性，但我可以消除一些属性，但还有像：id，class，name等属性。

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

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

编辑：我正在尝试仅删除内联事件，并且在删除之前我还需要将它们“保存”到其他位置，因此克隆以完全处理不是一个选项。

- tomermes

---

你是想要仅移除内联事件吗？ - zer00ne

我本来想建议使用jQuery，但是itsgoingdown已经有了一个JS解决方案。 - zer00ne

我可以使用jQuery（虽然我不太喜欢，因为性能很重要），但如果没有其他选择，我会使用它。 - tomermes

当您“保存”它们时，您希望将它们保存在哪里？可以假设每个元素都有一个ID吗？ - zer00ne

你想从DOM中删除事件属性吗？还是只是暂时禁用事件回调调用？ - Supersharp

Answer 1

在这里，您可以获取所有元素属性，创建em数组，使用for循环检查任何一个属性是否以on开头。
然后使用name/value创建一个内联事件处理程序的对象，将其push到数组中，并最终从节点中删除它：

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>

- The Process

---

不错的解决方案，只是在删除之前我必须将它们“保存”到另一个数据结构中。请查看我的编辑。 - tomermes

编辑过的答案，请查看（检查那个按钮）。 - The Process

1. 不要在“Attr”上使用“.nodeName”/“.nodeValue”，请改用“.name”和“.value”（参见https://developer.mozilla.org/en-US/docs/Web/API/Attr#Deprecated_properties_and_methods）。
2. 奇怪的是，似乎没有其他以“on”开头的非事件属性，尽管我仍然会使用硬编码列表。

- Nickolay

此外，我认为使用 filter/map 更简单，即使您无法使用箭头函数并将其替换为常规函数：Array.filter(el.attributes, (attr) => attr.name.indexOf("on")===0).map((attr) => ({name: attr.name, val: attr.value}))。 - Nickolay

Answer 2

过滤所有名称以'on'开头的属性。

- Supersharp

Answer 3

如果你能夠列出想要刪除/檢查的所有處理程序，那麼這對你來說是有效的（基本上它會搜索你給它的屬性並刪除/保存它們 - 額外贈送，你也可以以同樣的方式刪除其他一些你想要的屬性，只需將它們添加到列表中）： JSFiddle example 額外提一下，當使用fiddleJS時我不知道該發布什麼作為“義務代碼”，但是你可以檢查我提取的javascript代碼。你缺少HTML。

var dataStorage = {};


function someFunction(num) {
  alert(num);
};


function removeInlineHandlers(elementID) {
  //Define all the attributes you want to remove;
  var removeableAttributes = ["onclick", "onhover", "onmouseout"];
  var attributes = document.getElementById(elementID).attributes;
  var addFlag = true;
  var i = 0;
  var j = 0;

  for (i = 0; i < attributes.length; i++) {
    for (j = 0; j < removeableAttributes.length; j++) {
      if (attributes[i].name == removeableAttributes[j]) {
        // If this is the first attribute to be removed, add an object
        // to track the data of removeals.
        if (addFlag) {
          dataStorage[elementID] = {};
          addFlag = false;
        }

        dataStorage[elementID][attributes[i].name] = attributes[i].nodeValue;
        document.getElementById(elementID).removeAttribute(attributes[i].name);
        break;
      }
    }
  }
}

function removeHandlersAndPrint() {
  removeInlineHandlers("btn1");
  removeInlineHandlers("btn2");
  removeInlineHandlers("btn3");
  removeInlineHandlers("btn4");
  console.log(dataStorage);
}

- Dellirium