访问/复制/克隆元素的事件监听器（或编辑行号和源名称）
场景
I’m writing a Chrome extension / userscript to add a little usability to a third-party site. The page that the extension is made for has a few elements that have `click` event listeners attached (per-element, no bubbling) via `addEventListener` (the `onclick` and other properties are empty). My extension clones (`cloneNode`) one of the elements and appends it to the list.例如，
<div id="list">
<div id="d1">A</div>
<div id="d2">B</div>
<div id="d3">C</div>
</div>
我的扩展将添加一个 D 元素。
问题
扩展列表工作正常，但是当单击原始节点时，它们会执行预期的操作，而单击新节点则不会执行任何操作。
测试
测试 1
I examined the event listeners of the elements in Chrome’s Developer Tools and tried copying the anonymous function to my new elements with `addEventListener` (making sure to duplicate the parameters), but that did not work. It did perform some of the expected actions, but not all of them.测试 2
I tried anfilat’s suggestion of using the trick from [this question][1]. I inserted a `script` block that then called `addEventHanlder` for the new node, and it did indeed have the new handler (with a `sourceName` referring to the site—the page, not the `.JS` file—instead of the extension), however it still threw a variable not found error.假设
I suspect that it is a domain issue because the click-handler calls a function in an external `.JS` as referenced in the `sourceName` and `lineNumber` of the event listener as seen below. Note that the `listenerBody` is identical, but the sources differ.问题
Is there a way to access, copy, or clone the handlers of an element and/or edit the `lineNumber` and `sourceName`?附录 A：图表
图 1：引用站点上 .JS 的原始元素的处理程序（稍作文件名编辑）：
图 2：引用扩展名的新元素的处理程序：
Scenario
I’m writing a Chrome extension / userscript to add a little usability to a third-party site. The page that the extension is made for has a few elements that have `click` event listeners attached (per-element, no bubbling) via `addEventListener` (the `onclick` and other properties are empty). My extension clones (`cloneNode`) one of the elements and appends it to the list.
For example with this,
<div id="list">
<div id="d1">A</div>
<div id="d2">B</div>
<div id="d3">C</div>
</div>
my extension would add a D element.
Problem
Extending the list works fine, but when the original nodes are clicked, they perform the expected action, while clicking the new one does nothing.
Tests
Test 1
I examined the event listeners of the elements in Chrome’s Developer Tools and tried copying the anonymous function to my new elements with `addEventListener` (making sure to duplicate the parameters), but that did not work. It did perform some of the expected actions, but not all of them.
Test 2
I tried anfilat’s suggestion of using the trick from [this question][1]. I inserted a `script` block that then called `addEventHanlder` for the new node, and it did indeed have the new handler (with a `sourceName` referring to the site—the page, not the `.JS` file—instead of the extension), however it still threw a variable not found error.
Hypothesis
I suspect that it is a domain issue because the click-handler calls a function in an external `.JS` as referenced in the `sourceName` and `lineNumber` of the event listener as seen below. Note that the `listenerBody` is identical, but the sources differ.
Question
Is there a way to access, copy, or clone the handlers of an element and/or edit the `lineNumber` and `sourceName`?
Appendix A: Diagrams
Figure 1: Handlers of original elements referring to a .JS on the site (with slight filename edits):
Figure 2: Handlers of new elements referring to the extension:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我编写了小型工作测试。
Crome 扩展注入脚本：
测试 html:
和 test.js:
I wrote the small working test.
Crome extension inject script:
test html:
and test.js: