将所有 onclick 更改为事件侦听器答案

【问题标题】：Change all onclick to event listeners将所有 onclick 更改为事件侦听器
【发布时间】：2021-10-19 23:47:54
【问题描述】：

我们最近在我们的软件中引入了 nonce 内容安全策略。问题是我们有数百个 HTML 元素通过 onclick 事件执行内联 Javascript，我们不想再接受“unsafe-inline”了。

有什么方法可以从带有onclick 属性集的页面中获取所有元素，阅读他们执行它的代码并添加类似的内容

$(element).click(function(){
   doAction();
});

【问题讨论】：

标签： javascript jquery content-security-policy nonce

【解决方案1】：

onclick 属性在您的 JS 中的任何其他点击事件处理程序之前执行。

function doSomething() {
  console.log('I do something')
}

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (typeof allElements[i].onclick === 'function') {
    allElements[i].addEventListener("click", function(e) {
      console.log('Before I do something');
    });
  }
}

&lt;div onclick="doSomething()"&gt;Click me to doSomething&lt;/div&gt;

一个技巧解决方法是做这样的事情：

function doSomething() {
  console.log('I do something')
}

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (typeof allElements[i].onclick === 'function') {
    allElements[i].addEventListener("mousedown", function(e) {
      console.log('Before I do something');
    });
  }
}

&lt;div onclick="doSomething()"&gt;Click me to doSomething&lt;/div&gt;

【讨论】：