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

Posted 2023-02-22

【中文标题】将所有 onclick 更改为事件侦听器

【英文标题】：Change all onclick to event listeners

【发布时间】：2021-10-19 23:47:54

【问题描述】：

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

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

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

【参考方案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');
    );
  

<div onclick="doSomething()">Click me to doSomething</div>

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

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');
    );
  

<div onclick="doSomething()">Click me to doSomething</div>