访问/复制/克隆元素的事件监听器（或编辑lineNumber和sourceName）

时间：2012-02-11 05:49:01

标签： javascript-events google-chrome-extension userscripts clonenode

方案

我正在编写Chrome扩展程序/用户脚本，以便为第三方网站添加一些可用性。扩展所针对的页面包含一些元素，这些元素通过addEventListener附加了click个事件侦听器（每个元素，没有冒泡）（onclick和其他属性为空）。我的扩展克隆（cloneNode）其中一个元素并将其附加到列表中。

例如，

<div id="list">
  <div id="d1">A</div>
  <div id="d2">B</div>
  <div id="d3">C</div>
</div>

我的扩展程序会添加一个D元素。

问题

扩展列表工作正常，但是当单击原始节点时，它们会执行预期的操作，而单击新节点则不会执行任何操作。

测试

测试1

我检查了Chrome开发者工具中元素的事件监听器，并尝试使用addEventListener将匿名函数复制到我的新元素（确保复制参数），但这不起作用。它确实执行了一些预期的操作，但不是全部。

测试2

我尝试了anfilat建议使用来自this question的技巧。我插入一个script块，然后为新节点调用addEventHanlder，它确实有新的处理程序（sourceName引用网站 - 而不是.JS 1}}文件 - 而不是扩展名），但它仍然抛出一个未找到的变量错误。

假设

我怀疑这是一个域问题，因为点击处理程序调用外部.JS中的函数，如下面的事件监听器的sourceName和lineNumber所引用。请注意，listenerBody是相同的，但来源不同。

问题

有没有办法访问，复制或克隆元素的处理程序和/或编辑lineNumber和sourceName？

附录A：图表

图1 ：原始元素的处理程序引用网站上的.JS（带有轻微的文件名编辑）：

Site

图2 ：引用扩展名的新元素的处理程序：

Extension

1 个答案:

答案 0 :(得分：1)

我写了小工作测试。

Chrome扩展程序注入脚本：

var myScriptElement = document.createElement('script'); 
myScriptElement.innerHTML =
  'b=document.getElementById("button");' +
  'c=b.cloneNode(true);' +
  'b.parentElement.appendChild(c);' +
  'c.addEventListener("click", function(e){foo("from new button")}, false);';
document.querySelector('head').appendChild(myScriptElement);

测试html：

<html>
<script type='text/javascript' src='test.js'></script>
<body>
<button id='button'>test</button>
<script>
document.getElementById('button').addEventListener('click', function (event) {
  foo('from page');
}, false);
</script>
</body>
</html>

和test.js：

function foo(text) {
  console.log(text);
};
相关问题
最新问题