javascript - JS事件注册而不是onclick...但是如何使其可重用?解析ID?

标签 javascript addeventlistener

我看到了这个question第一个答案非常适合所提出的问题...但是如果我想对不同的命名元素一遍又一遍地重用代码怎么办?

让我具体说一下。

通过我的代码(网站上的多个页面都调用相同的 file.js),我希望拥有各种内部“链接”,现在我将其编写为:

<a onclick="testFunction('targetA');">test A</a>
<a onclick="testFunction('targetB');">test B</a>

这会相应地调用 javascript。这样做的好处是可以一遍又一遍地使用相同的 JS,而无需为每个“目标”编写一个。缺点是,除了我每次都必须在上面输入困惑的内容之外,根据那个人的回答,这不是正确的做事方式。

那么有没有一种“正确的方法”可以让我做这样的事情(意识到这是伪代码):

<a id="test.A">test A</a>
<a id="test.B">test B</a>

并且不必在 JS 文件中显式定义 test.A 与 test.B(与 C、D、E...)?例如,JS 可以注册到“#test”,但解析出 .X 并将其作为变量进行操作?

或者???

最佳答案

我不知道这是否太夸张了,也许我不明白你想要什么 - 但那又怎么样

var tests = document.querySelectorAll('[id^="test."]');
[].forEach.call(tests, function(a) {
   a.addEventListener('click', function(e) {
      alert(e.target.id.split('.')[1]+' clicked');
   }, false);
})  

会说“B clicked”等。这将针对您想要的所有 test.* id。显然,您不必对点击事件中的任何内容使用 id,它可以是保存值或其他内容的属性。

演示 -> http://jsfiddle.net/sbeyer8f/

关于javascript - JS事件注册而不是onclick...但是如何使其可重用?解析ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31418762/

相关文章:

javascript - 谷歌地图与 Cordova /phonegap中的图像叠加

javascript - addEventListener 取决于 setTimeout

javascript - 5 个 DIV 框 - 使用 querySelector 和 addEventListener 填充颜色

javascript - event.preventDefault 无法正常工作

javascript - 函数返回未定义值,有点迷糊

javascript - Jquery改变背景颜色并平滑过渡

JavaScript addEventListener : Getting variable to persist with it

javascript - 如何在 JavaScript 中获取 li 中每个 anchor 的顶层节点?

javascript - 如何在 javascript 事件触发时用一些内容填充tinymce?

javascript - window.setinterval 不适用于我的 chrome 扩展